[解決済み] Angular 2で相対パスが非常に長いインポートを回避する方法とは？

質問

のようなものを導入するにはどうすればよいのでしょうか？ 'my-app-name/services' のようなものを導入して、次のimportのような行を避けるにはどうしたらよいでしょうか？

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

どのように解決するのですか？

TypeScript 2.0以上

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";

ここから、使用しているモジュールローダーがこれらのimport名をサポートするように設定する必要がある。今のところ、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";

これらの余分なファイルを維持することは、最初の作業が少し増えます (その作業を省くには バレルメンテナ を使えば不要になります)、しかし最終的には少ない労力で元が取れることがわかりました。ディレクトリ構造の大きな変更を行うのがはるかに簡単で、行わなければならないインポートの数を減らすことができます。

注意

これを行う場合、いくつか注意しなければならないこと、してはいけないことがあります。

1. 循環的な再エクスポートに注意する必要があります。したがって、2 つのサブフォルダー内のファイルが互いに参照し合う場合、フル パスを使用する必要があります。
2. 同じ元のフォルダからフォルダを遡るべきではありません (例: 検証フォルダのファイルにいるときに import {XyService} from "../validation"; ). これと最初のポイントは、インポートが定義されていないというエラーにつながる可能性があることを発見しました。
3. 最後に、同じ名前を持つ2つのエクスポートをサブフォルダ内に持つことはできません。通常、それは問題ではありませんが。