角度ngModuleのentryComponentsとは何ですか?


131

に依存するIonicアプリ(2.0.0-rc0)に取り組んでいますangular 2。の新しい紹介ngModulesが含まれています。app.module.ts.以下を追加します。

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Users } from '../pages/users/users';

@NgModule({
  declarations: [
    MyApp,
    Users
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Users
  ]
})
export class AppModule {}

entryComponentsここで何をしますか?Componentsはすでにで定義されていdeclarationsます。それで、それらを繰り返す必要性は何ですか?ここにコンポーネントを含めないとどうなりますか?


4
すなわち唯一の代わりにされているすべてのコンポーネントのコンパイルの実際のプロジェクトで使用されているコンポーネントをコンパイルする「木が揺れ、」有効にするには、角度の用途のentryComponents declaredngModuleなく、使用されることはありませんが。angular.io/docs/ts/latest/cookbook/... entrycomponents -
サマール

回答:


155

これは、を使用して追加される動的に追加されるコンポーネント用ViewContainerRef.createComponent()です。それらを追加してentryComponents、オフラインテンプレートコンパイラにそれらをコンパイルしてファクトリを作成するように指示します。

はDOMにルーティングされたコンポーネントを追加するentryComponentsためにrouter-outletも使用さViewContainerRef.createComponent()れるため、ルート構成に登録されたコンポーネントも自動的に追加されます。

オフラインテンプレートコンパイラ(OTC)は、実際に使用されるコンポーネントのみをビルドします。コンポーネントがテンプレートで直接使用されていない場合、OTCはコンポーネントをコンパイルする必要があるかどうかを判断できません。entryComponentsを使用すると、このコンポーネントもコンパイルして実行時に使用できるようにOTCに指示できます。

エントリーコンポーネントとは何ですか?(angular.io)

NgModule docs(angular.io)

このコンポーネントの定義時にコンパイルする必要があるコンポーネントを定義します。ここにリストされているコンポーネントごとに、AngularはComponentFactoryを作成し、ComponentFactoryResolverに格納します。

動的に追加されたコンポーネントをリストしないとentryComponents、Angularがコンポーネントを作成していないため、不足しているファクトリについてエラーメッセージが表示されます。

https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.htmlも参照してください。


12
率直に言って、私はその100%正解を知っていますが、私のために用心棒を使いました、もっと詳しく教えていただけませんか?
Pankaj Parkar

26
何が不明確なのかわかりにくい。オフラインテンプレートコンパイラ(OTC)は、実際に使用されるコンポーネントのみをビルドします。コンポーネントがテンプレートで直接使用されていない場合、OTCはコンポーネントをコンパイルする必要があるかどうかを判断できません。これによりentryComponents、OTCにこのコンポーネントもコンパイルして実行時に使用できるようにすることができます。
ギュンターZöchbauer


2
したがって、一般的に、コンポーネントがリストされdeclarationsている場合、コンポーネントもにリストされているはずentryComponentsですよね?
omn​​omnom 16

1
コンポーネントがcreateComponentコードで動的に追加された場合、またはたとえば、thod APIを使用してコンポーネントを追加するルーターの場合のみ。
ギュンターZöchbauer

30

Angularドキュメントよりも優れた説明は得られません:entry-componentsおよびngmodule-faq

そして以下は角度のドキュメントからの説明です。

エントリコンポーネントは、Angularがタイプごとに強制的にロードするコンポーネントです。

セレクタを介して宣言的にロードされたコンポーネントは、エントリコンポーネントではありません。

ほとんどのアプリケーションコンポーネントは宣言的に読み込まれます。Angularはコンポーネントのセレクターを使用してテンプレート内の要素を見つけます。次に、コンポーネントのHTML表現を作成し、DOMの選択した要素に挿入します。これらはエントリコンポーネントではありません。

一部のコンポーネントは動的にロードされるだけで、コンポーネントテンプレートで参照されることはありません。

ブートストラップルートAppComponentは、エントリコンポーネントです。True、そのセレクターはindex.htmlの要素タグと一致します。しかしindex.html、これはコンポーネントテンプレートでAppComponentはなく、セレクターはどのコンポーネントテンプレートの要素とも一致しません。

Angularは、AppComponentをタイプ別にリストするか@NgModule.bootstrap、モジュールのngDoBootstrapメソッドで強制的にブーストラップするため、動的にAppComponentをロードします。

ルート定義のコンポーネントもエントリコンポーネントです。ルート定義は、タイプによってコンポーネントを参照します。ルーターはルーティングされたコンポーネントのセレクターを無視し(セレクターがある場合でも)、コンポーネントをに動的にロードしますRouterOutlet

コンパイラは、これらのエントリコンポーネントを他のコンポーネントテンプレートで探すことはできません。それらをentryComponentsリストに追加することにより、それらについて伝える必要があります。

Angularは以下のタイプのコンポーネントをモジュールに自動的に追加しますentryComponents

  • @NgModule.bootstrapリスト内のコンポーネント。
  • ルーター構成で参照されるコンポーネント。

無害ですが、これらのコンポーネントに明示的に言及する必要はありません。


現在、角度付きのドキュメントはありません。SOに感謝します!
Caelum

これは、ルート構成のコンポーネントが自動的にentryComponentsに追加されることを述べていないようです(したがって、通常は定義する必要はありません)。
Connor

使用するコンポーネントを作成した場合EntryComponentselector属性を削除する必要がありますか?(使用されないため)
Ronan

24

他の回答ではこれについて言及していますが、基本的な要約は次のとおりです。

  • コンポーネントがHTMLテンプレート内で使用されていない場合に必要です <my-component />
  • たとえば、Angular Materialダイアログコンポーネントを使用する場合、コンポーネントを間接的に使用します。

マテリアルダイアログコンポーネントは、テンプレートではなくTSコード内に作成されます。

    const dialogRef = this.dialog.open(MyExampleDialog, { width: '250px' });
  }

これには、entryComponentとして登録する必要があります。

  • entryComponents: [MyExampleDialog]

そうしないと、エラーが発生します。

  • ERROR Error: No component factory found for MyExampleDialog. Did you add it to @NgModule.entryComponents?

2
ここで最高の説明。
nop

3

entryComponents配列は、htmlにはなく、動的に作成されるコンポーネントのみを定義するために使用されます。Angularでは、エントリコンポーネントを見つけてコンパイルするためにこのヒントが必要です。

エントリコンポーネントには、主に2つのタイプがあります。

  • ブートストラップされたルートコンポーネント。
  • ルート定義で指定するコンポーネント。

エントリコンポーネントの詳細については、angular.ioを参照して くださいhttps://angular.io/guide/entry-components


1

についての背景 entryComponent

entryComponent角荷重を強制するコンポーネントです。ルート定義entryComponentNgModuleまたはルート定義内でブートストラップすることにより宣言できます。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent] // bootstrapped entry component
})

ドキュメンテーションは以下を言います

2つのタイプのコンポーネントを対比するために、テンプレートに含まれている宣言型のコンポーネントがあります。さらに、命令的にロードするコンポーネントがあります。つまり、エントリコンポーネントです。

についてのあなたの特定の質問に答えるために entryComponents

ありentryComponentsの配列@NgModuleファイルが。これを使用してentryComponents、コンポーネントがを使用してブートストラップされる場合に追加できますViewContainerRef.createComponent()

つまり、ブートストラップやテンプレートではなく、動的にコンポーネントを作成しています。

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(myComp.component);
const viewContainerRef = this.compHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);

0

Angular 9以降 entryComponentsは、Ivyのおかげで不要になりました。この機能を廃止することで、モジュール宣言から削除できます。

非推奨のAPIと機能- もう必要entryComponentsありANALYZE_FOR_ENTRY_COMPONENTSません

以前entryComponentsは、NgModule定義内の配列を使用して、動的に作成および挿入されるコンポーネントをコンパイラーに指示していました。Ivyでは、これはもう要件ではなく、entryComponents配列は既存のモジュール宣言から削除できます。同じことがANALYZE_FOR_ENTRY_COMPONENTS注入トークンにも当てはまります。

角アイビー

Ivyは、Angularの次世代のコンパイルおよびレンダリングパイプラインのコード名です。Angularのバージョン9リリースでは、View Engineと呼ばれる古いコンパイラとランタイムの代わりに、新しいコンパイラとランタイムの命令がデフォルトで使用されます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.