web-dev-qa-db-ja.com

Angular 4：コンポーネントファクトリが見つかりません、@ NgModule.entryComponentsに追加しましたか？

WebpackでAngular 4テンプレートを使用していますが、コンポーネント（ConfirmComponent）を使用しようとするとこのエラーが発生します。

ConfirmComponentのコンポーネントファクトリが見つかりませんでした。 @ NgModule.entryComponentsに追加しましたか？

コンポーネントはapp.module.server.tsで宣言されています

@NgModule({
  bootstrap: [ AppComponent ],
  imports: [
    // ...
  ],
  entryComponents: [
    ConfirmComponent,
  ],
})
export class AppModule { }

私はapp.module.browser.tsとapp.module.shared.tsも持っています

どうすれば修正できますか？

angularangular-webpack-starter
125
mrapi

これをmodule.tsに追加してください。

declarations: [
  AppComponent,
  ConfirmComponent
]

confirmComponentが別のモジュールにある場合は、そこにエクスポートする必要があるため、外部で使用できます。

exports: [ ConfirmComponent ]

動的にロードされるコンポーネントの場合、そしてComponentFactoryが生成されるためには、コンポーネントはモジュールのentryComponentsにも追加されなければなりません：

declarations: [
  AppComponent,
  ConfirmComponent
],
entryComponents: [ConfirmComponent],

entryComponentsの定義に従って

このモジュールが定義されたときにコンパイルされるべきコンポーネントのリストを指定します。ここにリストされた各コンポーネントに対して、AngularはComponentFactoryを作成し、それをComponentFactoryResolverに格納します。

145
Fateh Mohamed

詳細を見るentryComponentについて：

コンポーネントを動的にロードしている場合は、それをdeclarationsとentryComponentの両方に入れる必要があります。

@NgModule({
  imports: [...],
  exports: [...],
  entryComponents: [ConfirmComponent,..],
  declarations: [ConfirmComponent,...],
  providers: [...]
})
72
Ali Adravi

TL; DR：ng6のprovidedIn: "root"を含むサービスは、 app.module のentryComponentsにComponentが追加されていない場合、ComponentFactoryを見つけることができません。

この問題は、サービスでコンポーネントを動的に作成することと組み合わせてAngular 6を使用している場合にも発生する可能性があります。

たとえば、オーバーレイを作成する：

@Injectable({
  providedIn: "root"
})
export class OverlayService {

  constructor(private _overlay: Overlay) {}

  openOverlay() {
    const overlayRef = this._createOverlay();
    const portal = new ComponentPortal(OverlayExampleComponent);

    overlayRef.attach(portal).instance;
  }
}

問題は

providedIn： "root"

このサービスを app.module に提供する定義。

そのため、サービスが、たとえばOverlayExampleComponentを宣言してentryComponentsに追加した "OverlayModule"にある場合、サービスはOverlayExampleComponentのComponentFactoryを見つけることができません。

31
FaustmannChr

私は同じ問題を抱えていました。この場合、imports [...]が重要です。NgbModalModuleをインポートしないとimports: [ ... NgbModalModule, ... ], が機能しないからです。

エラーの説明は、コンポーネントはentryComponents配列に追加されるべきだと言っています、そしてそれは明白ですが、あなたが最初にこれを追加したことを確認してください：

__コード__
19
Alex Link

そのコンポーネントをアプリのモジュールの@NgModuleのentryComponentsに追加します。

entryComponents:[ConfirmComponent],

宣言と同様に：

declarations: [
    AppComponent,
    ConfirmComponent
]
15
RohitAneja

私は角度6と同じ問題を抱えています、それは私のために働いたものです：

@NgModule({
...
entryComponents: [ConfirmComponent],
providers:[ConfirmService]

})

ConfirmService のようなサービスがある場合は、 root ではなく現在のモジュールのプロバイダで宣言する必要があります。

9
Omar AMEZOUG

以下に示すように、インポートに 'NgbModalModule'を、entryComponents App.module.tsにコンポーネント名を追加します enter image description here

7
MayankGaur

動的に作成されたコンポーネントをentryComponentsの@NgModuledecorator関数の下に配置します。

@NgModule({
    imports: [
        FormsModule,
        CommonModule,
        DashbaordRoutingModule
    ],
    declarations: [
        MainComponent,
        TestDialog
    ],
    entryComponents: [
        TestDialog
    ]
})
7
mehdi

動的コンポーネントを作成するとき、Angular 7でも同じ問題がありました。動的にロードする必要がある2つのコンポーネント（TreatListComponent、MyTreatComponent）があります。私はちょうど私のapp.module.tsファイルにentryComponents配列を追加しました。

entryComponents: [
TreatListComponent,
MyTreatComponent

]、

6
Chamila Maddumage

このエラーは、コンポーネントを動的にロードしようとしたときに発生します。

  1. ロードしたいコンポーネントはルーティングモジュールではありません
  2. コンポーネントはモジュールentryComponentsにありません。

routingModule内

const routes: Routes = [{ path: 'confirm-component', component: ConfirmComponent,data: {}}]

またはモジュール内

entryComponents: [
ConfirmComponent
}

このエラーを修正するには、ルータをコンポーネントに追加するか、それをmoduleのentryComponentsに追加します。

  1. このアプローチのcomponent.drawbackにルーターを追加すると、あなたのコンポーネントはそのURLでアクセス可能になります。
  2. EntryComponentsに追加してください。この場合、あなたのコンポーネントにはURLが添付されず、URLでアクセスすることはできません。
5
Muhammad Nasir

あなたのアプリケーションでルーティングを使用している場合

ルーティングパスに新しいコンポーネントを追加することを確認してください

例えば ​​：

    const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: 'fundList',      component: FundListComponent },
];
4
Mohamathu Rafi

ブートストラップモーダルについても同じ問題がありました

'@ ng-bootstrap/ng-bootstrap'から{NgbModal}をインポートしてください。

このような場合は、他の回答から示唆されるように、コンポーネントをモジュール宣言とentryComponentsに追加するだけでなく、モジュールにも追加します

'@ ng-bootstrap/ng-bootstrap'から{NgbModule}をインポートしてください。

imports: [
   NgbModule.forRoot(),
   ...
]
4
Felipe Bejarano

動的コンポーネントを使用したag-gridでも同じ問題が発生していました。動的コンポーネントをag-gridモジュールに追加する必要があることを発見しました.withComponents []

インポート：[StratoMaterialModule、BrowserModule、AppRoutingModule、HttpClientModule、BrowserAnimationsModule、NgbModule.forRoot（）、FormsModule、ReactiveFormsModule、AppRoutingModule、AgGridModule.withComponents（ProjectUpdateButtonComponent）]、

2
Eric Hewett

私の場合、entryComponentsはまったく必要ありませんでした。下のリンクに記載されている基本設定だけですが、メインのアプリケーションモジュールとそれを含むモジュールの両方にインポートを含める必要がありました。

imports: [
    NgbModule.forRoot(),
    ...
]

https://medium.com/@sunilk/getting-started-angular-6-and-ng-bootstrap-4-4b314e015c1c

コンポーネントがモーダルに含まれる場合は、entryComponentsに追加するだけです。ドキュメントから：

モーダルウィンドウの内容として既存のコンポーネントを渡すことができます。この場合、NgModuleのentryComponentsセクションとしてコンテンツコンポーネントを追加することを忘れないでください。

2
Dovev Hefetz

ここで明確にするために。コンポーネントでComponentFactoryResolverを直接使用していない場合、それをサービスに抽象化したい場合、コンポーネントにインジェクトすると、そのモジュールのプロバイダーの下にロードする必要があります。 。

1
sensei

私のエラーは、.htmlから誤ったパラメーターでNgbModal openメソッドを呼び出していました

0
JanBrus

entryComponentsでコンポーネントダイアログクラスを提供した後もエラーが発生する場合は、ng serveを再起動してみてください-うまくいきました。

0
mgierw