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

Angular 4テンプレートをwebpackで使用していますが、コンポーネント（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

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

これをに追加しmodule.ts、

declarations: [
  AppComponent,
  ConfirmComponent
]

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

exports: [ ConfirmComponent ]

--- Ivyを明示的に有効にしてAngular 9またはAngular 8を更新する---

Ivyを使用した入力コンポーネントは不要になり、非推奨になりました

--- Ivyが無効になっているAngular 9および8の場合---

動的にロードされるコンポーネントの場合で、ComponentFactoryを生成するには、コンポーネントをモジュールのentryComponentsにも追加する必要があります。

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

entryComponentsの定義に従って

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

詳細を参照してくださいについてのentryComponent：

コンポーネントを動的にロードする場合は、declarationsとの両方に配置する必要がありますentryComponent。

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

TL; DR：とNG6内のサービスprovidedIn: "root"コンポーネントが中に添加されていない場合ComponentFactoryを見つけることができないentryComponentsのapp.module。

この問題は、サービスでコンポーネントを動的に作成することと組み合わせて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： "ルート"

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

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

同じ問題がありました。この場合imports [...]は重要ですNgbModalModule。インポートしないと機能しません。

エラーの説明では、コンポーネントをentryComponents配列に追加する必要があることは明らかですが、これを最初に追加したことを確認してください。

imports: [
    ...
    NgbModalModule,
    ...
  ],

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

entryComponents:[ConfirmComponent],

および宣言：

declarations: [
    AppComponent,
    ConfirmComponent
]

以下に示すように、インポートに「NgbModalModule」を、entryComponents App.module.tsにコンポーネント名を追加します。

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

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

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

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

})

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

ブートストラップモーダルでも同じ問題が発生しました

'@ ng-bootstrap / ng-bootstrap'から{NgbModal}をインポートします。

これがあなたのケースである場合、他の応答が示唆するようにモジュール宣言とentryComponentsにコンポーネントを追加するだけでなく、これをモジュールに追加してください

'@ ng-bootstrap / ng-bootstrap'から{NgbModule}をインポートします。

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

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

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

routingModule内

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

またはモジュール内

entryComponents: [
ConfirmComponent
} 

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

1. このアプローチのcomponent.drawbackにルーターを追加すると、そのURLでコンポーネントにアクセスできるようになります。
2. それをentryComponentsに追加します。この場合、コンポーネントにはURLがアタッチされておらず、URLでアクセスできません。

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

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

アプリケーションでルーティングを使用する場合

新しいコンポーネントをルーティングパスに追加してください

例えば ​​：

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

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

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

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

コンポーネントがモーダルに含まれる場合のみ、entryComponentsに追加する必要があります。ドキュメントから：

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

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

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

私の場合、MatDialogModule子モジュールのインポートに追加するのを忘れていました。

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

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

私のエラーは、.htmlからの不正なパラメーターでNgbModalオープンメソッドを呼び出すことでした

次のようNgbModuleにモジュールにをインポートする必要があります。

@NgModule({
  declarations: [
    AboutModalComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgxLoadingModule,
    NgbDatepickerModule,
    NgbModule
  ],
  entryComponents: [AboutModalComponent]
})
 export class HomeModule {}

1. entryComponents重要です。これに関する上記の答えは正しいです。

だが...

2. モーダルを開くサービス（一般的なパターン）を提供していて、ダイアログコンポーネントを定義するモジュールがAppModuleに読み込まれていない場合は、に変更providedIn: 'root'する必要がありますprovidedIn: MyModule。一般的な良い習慣としてprovidedIn: SomeModule、モジュール内にあるすべてのダイアログサービスにを使用するだけです。

私はAngular8を使用しており、コンポーネントを動的に開いて別のモジュールを形成しようとしています。この場合、import the moduleコンポーネントを開こうとしているモジュールに、もちろん コンポーネントに加えてexport、entryComponents配列にリストする必要があります。以前の答えがしたように。

imports: [
    ...
    TheModuleThatOwnTheTargetedComponent,
    ...
  ],

私の場合、私は、この問題を解決：
置く）1 NgxMaterialTimepickerModuleにapp module imports:[ ]
置く）2 NgxMaterialTimepickerModuleにtestmodule.ts imports:[ ]
置く）3 testcomponentにdeclartions:[ ]し、entryComponents:[ ]

（私は角度8+バージョンを使用しています）

app.moduleのすべての新しいページを宣言する

@NgModule({
  declarations: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage

    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpClientModule,
    NgxBarcodeModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage
    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],

 - 


----------


---------