Angular 2で非常に長い相対パスを持つインポートを回避するにはどうすればよいですか？

'my-app-name/services'次のインポートのような行を避けるようなものをどのように導入できますか？

import {XyService} from '../../../services/validation/xy.service';

TypeScript 2.0以降

TypeScript 2.0では、次の場所にbaseUrlプロパティを追加できますtsconfig.json。

{
    "compilerOptions": {
        "baseUrl": "."
        // etc...
    },
    // etc...
}

次に、ベースディレクトリにいるかのようにすべてをインポートできます。

import {XyService} from "services/validation/xy.service";

これに加えてpaths、パターンを照合してマップ化できるプロパティを追加できます。例えば：

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "services/*": [
                "services/validation/*"
            ]
        }
        // etc...
    },
    // etc...
}

これにより、どこからでもインポートできます。

import {XyService} from "services/xy.service";

そこから、これらのインポート名をサポートするために使用しているモジュールローダーを設定する必要があります。現時点では、TypeScriptコンパイラーはこれらを自動的にマップしないようです。

これについてはgithub issueで読むことができます。rootDirs複数のプロジェクトを使用するときに役立つプロパティもあります。

TypeScript 2.0より前（TS 2.0+でも引き続き適用可能）

「バレル」を使用すると簡単にできることがわかりました。

1. 各フォルダにindex.tsファイルを作成します。
2. これらのファイルで、フォルダー内の各ファイルを再エクスポートします。

例

あなたの場合、最初にというファイルを作成しますmy-app-name/services/validation/index.ts。このファイルに次のコードを記述します。

export * from "./xy.service";

次に、というファイルを作成し、my-app-name/services/index.ts次のコードを記述します。

export * from "./validation";

これで、サービスを次のように使用できます（index暗黙）：

import {XyService} from "../../../services";

そして、そこに複数のファイルがあると、さらに簡単になります。

import {XyService, MyOtherService, MyOtherSerivce2} from "../../../services";

これらの余分なファイルを維持する必要があることは、前もってもう少し作業が必要です（作業は、barrel-maintainerを使用して削除できます）。主要なディレクトリ構造を変更する方がはるかに簡単で、実行する必要のあるインポートの数を削減します。

注意

これを行うときは、注意する必要があり、実行できないことがいくつかあります。

1. 循環再エクスポートを監視する必要があります。したがって、2つのサブフォルダにあるファイルが相互に参照している場合は、完全パスを使用する必要があります。
2. 同じ元のフォルダーからフォルダーを戻すことはできません（たとえば、検証フォルダー内のファイルにあり、を実行していますimport {XyService} from "../validation";）。私はこれを見つけました、そして最初のポイントは定義されていないインポートのエラーにつながる可能性があります。
3. 最後に、同じ名前の2つのエクスポートをサブフォルダーに含めることはできません。通常、それは問題ではありません。

tsconfig.jsonの以下の設定を使用する方が良い

{
  "compilerOptions": {
    "...": "reduced for brevity",

    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"]
    }
  }
}

Angular 6以前の伝統的な方法：

`import {XyService} from '../../../services/validation/xy.service';`

これらにリファクタリングする必要があります：

import {XyService} from '@app/services/validation/xy.service

短くて甘い！

私はこの質問に出くわしました。私はそれが今ずっと昔であることを知っていますが、それに遭遇した人にとってはもっと簡単な答えがあります。

長い間行っていたことが機能しなくなり、Angular 7で何かが変更されたのではないかと思っただけでした。いいえ、それは自分のコードだけでした。

いずれにせよtsconfig.json、長いインポートパスを回避するために1行変更するだけで済みました。

{
  "compilerOptions": {
  "...": "simplified for brevity",

   "baseUrl": "src"
  }
}

例：

// before:
import {XyService} from '../../../services/validation/xy.service';

// after:
import { XyService } from 'app/services/validation/xy.service';

これは、Angular-CLIが登場して以来、かなりうまくいきました。