Angular2 - ルート相対インポート 質問する

Angular2 - ルート相対インポート 質問する

angular2/typescript のインポートに問題があります。 'app/components/calendar' のようなルートでインポートを使用したいのですが、代わりに使用できる唯一の方法は次のようになります:

//app/views/order/order-view.ts
import {Calendar} from '../../components/calendar 

ここで、Calendar は次のように定義されます。

//app/components/calendar.ts
export class Calendar {
}

これは明らかに、階層が下に行くほど悪化します。最深部は「../../..」ですが、それでも非常に悪く、脆弱です。プロジェクト ルートを基準としたパスを使用する方法はありますか?

私は Visual Studio で作業していますが、相対インポートだけが VS がこれらのインポートを認識できるようにする唯一の方法のようです。

ベストアンサー1

答え

TypeScript 2.0 以降では、tsconfig.json プロパティを次のように設定できますbaseUrl

{
  "compilerOptions": {
    "baseUrl": "app"
}

次に、次のような希望の方法でコンポーネントをインポートします。

import { Calendar } from 'components/calendar';

付録

フォールバックパスの解決

重要な考慮事項は、baseUrlオプションを指定すると TypeScript コンパイラが次の処理を実行することです。

  1. baseUrlに関するパスを検索する
  2. moduleResolution解決に失敗した場合(モジュールが見つからない)、オプションに関するパスを検索します

システムJS

systemjs.config.jsSystemJS は Angular 開発段階で頻繁に使用されるため、パスが正しく解決されるように、それに応じて設定も行うようにしてください。


出典および詳細:https://github.com/Microsoft/TypeScript/issues/5039

おすすめ記事