角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 ]

---显式启用常春藤更新Angular 9或Angular 8 ---

不再需要带有常春藤的输入组件，现在已弃用

-对于禁用了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与在服务中动态创建Component结合使用，也会发生此问题！

例如，创建一个叠加层：

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

  constructor(private _overlay: Overlay) {}

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

    overlayRef.attach(portal).instance;
  }
}

问题是

includedIn：“根”

定义，它在app.module中提供此服务。

因此，例如，如果您的服务位于“ OverlayModule”中，并且在其中还声明了OverlayExampleComponent并将其添加到entryComponents中，则该服务将找不到ComponentFactory for OverlayExampleComponent。

我遇到过同样的问题。在这种情况下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
    ]
})

我对角度6有相同的问题，这对我有用：

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

})

如果您有类似ConfirmService之类的服务，则必须在当前模块的提供者中声明而不是在root中声明

我对引导模态有同样的问题

从'@ 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中遇到了相同的问题。有两个组件（TreatListComponent，MyTreatComponent）需要动态加载。我刚刚在我的app.module.ts文件中添加了entryComponents数组。

    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:[ ]

（我使用的是Angular 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
  ],

 - 


----------


---------