web-dev-qa-db-ja.com

Angular 2の非常に長い相対パスでのインポートを回避する方法は？

'my-app-name/services'のようなものを導入して、次のインポートのような行を避けるにはどうすればよいですか？

import {XyService} from '../../../services/validation/xy.service';
typescriptecmascript-6angularangular2-services
83
Thomas Zuberbühler

TypeScript 2.0以降

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

{
    "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プロパティもあります。

Pre TypeScript 2.0（TS 2.0+でも適用可能）

"barrels" を使用すると簡単にできることがわかりました。

  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つのエクスポートをサブフォルダーに含めることはできません。通常、それは問題ではありません。
127
David Sherret

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

短くて甘い！

8
Shivang Gupta

私はちょうどこの質問に出くわしました。私はそれが今の方法であることを知っていますが、それに出くわした人にとっては、より簡単な答えがあります。

長い間やっていたことが機能しなくなったために出くわし、Angular 7で何かが変わったのではないかと思っていました。

にもかかわらず、tsconfig.jsonの1行を変更するだけで、長いインポートパスが回避されます。

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

   "baseUrl": "src"
  }
}

これは、Angular-CLIが登場して以来、ほとんど私にとってはうまくいきました。

0
Chris Curnow