Angularアプリでは、@Component
にプロパティmoduleId
があることを確認しました。どういう意味ですか?
module.id
がどこにも定義されていなくても、アプリは動作します。それでもどうやって動くの?
@Component({
moduleId: module.id,
selector: 'ng-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [AppComponent]
});
Angularのベータリリース(バージョン2-alpha.51以降)は、@Component
デコレータの templateUrl および styleUrls のように、コンポーネントの相対アセットをサポートします。
module.id
はCommonJSを使うときに機能します。あなたはそれがどのように機能するかについて心配する必要はありません。
覚えておいてください :@ moduleデコレータのmoduleId:module.idを設定することがここでの鍵です。それがない場合、Angular 2はあなたのファイルをルートレベルで探します。
Justin Schwartzenbergerの投稿 からの投稿、 @Pradeep Jain のおかげで
2016年9月16日に更新:
webpack をバンドルに使用している場合は、デコレータに
module.id
は必要ありません。 Webpackプラグインの自動処理(追加)最終バンドルのmodule.id
TypeScript error
を取得した場合は、ファイル内の変数をdeclare
にするだけです。
// app.component.ts
declare var module: {
id: string;
}
//
@Component({
moduleId: module.id, // now it works without annoying TypeScript
...
})
UPDATE - December 08, 2016
module
キーワードはnode
で利用できます。したがって、プロジェクトに@types/node
をインストールすると、module
キーワードを使用する必要なく、declare
キーワードがTypeScriptファイルで自動的に使用可能になります。
npm install -D @types/node
tsconfig.json
ファイルに含める必要があります。//tsconfig.json
{
...
"compilerOptions": {
"types" : ["node"]
}
...
}
// some-component.ts
// now, no need to declare module
@Component({
moduleId: module.id, // now it works without annoying TypeScript
...
})
がんばろう
echonax
とNishchit Dhanani
のすばらしい説明に加えて、module.id
を使用したコンポーネントの実装が本当に嫌いだということを付け加えます。特に、(Ahead-of-Time) AoT-compilation のサポートがあり、現実的なプロジェクトの場合、これが目指すべきものである場合、コンポーネントメタデータにmodule.id
のような場所はありません。
Docs から:
SystemJS
ローダーおよびコンポーネント相対URLを使用するJiTコンパイル済みアプリケーションは、@Component.moduleId
プロパティをmodule.id
に設定する必要があります。モジュールオブジェクトは、AoTでコンパイルされたアプリの実行時には未定義です。次のようにindex.htmlでグローバルモジュール値を割り当てない限り、アプリはnull参照エラーで失敗します。
<script>window.module = 'aot';</script>
このバージョンのindex.html
ファイルの製品版にこの行を含めることは絶対に受け入れられないと思います!
したがって、目標は、次のコンポーネントメタデータ定義を使用して、開発用の(ジャストインタイム)JiTコンパイルとプロダクション用のAoTサポートを持つことです:(moduleId: module.id
行なし)
@Component({
selector: 'my-component',
templateUrl: 'my.component.html', <- relative to the components current path
styleUrls: ['my.component.css'] <- relative to the components current path
})
同時に、my.component.css
のようなスタイルとmy.component.html
relativeのようなテンプレートファイルをコンポーネントmy.component.ts
ファイルパスに配置したいと思います。
これをすべて達成するために、私が使用しているソリューションは、開発段階で複数のディレクトリソースからWebサーバー(lite-serverまたはbrowser-sync)をホストすることです!
bs-config.json
:
{
"port": 8000,
"server": ["app", "."]
}
これをお試しください answer 詳細をご覧ください。
このアプローチに依存する模範的なangular 2クイックスタートプロジェクトは、ホストされています here 。
Angular docに従って、@ Component({moduleId:module.id})は使用しないでください
参照してください: https://angular.io/docs/ts/latest/guide/change-log.html
そのページの関連テキストは次のとおりです。
moduleIdに関する言及がすべて削除されました。 "コンポーネントの相対パス"クックブックが削除されました(2017-03-13)
SystemJSの推奨設定に新しいSystemJSプラグイン(systemjs-angular-loader.js
)を追加しました。このプラグインはtemplateUrlとstyleUrlsの "component-relative"パスを動的に "絶対パス"に変換します。
コンポーネント相対パスのみを書くことを強くお勧めします。それがこれらのドキュメントで議論されている唯一のURL形式です。あなたはもはや@Component({ moduleId: module.id })
を書く必要はなく、またそうすべきでもありません。
Tsconfig.jsonで "module": "es6"を使用している場合は、これを使用する必要はありません:)
このmoduleId値は、Angularリフレクションプロセスとmetadata_resolverコンポーネントによって、コンポーネントが構築される前に完全修飾コンポーネントパスを評価するために使用されます。