Angular动态加载组件报错:No component factory found for XXXXComponent. Did you add it to @NgModule.entryComponents?

Angular在加载动态组件需要在@NgModule的entryComponents声明组件。否则会报类似以下的错误:

DialogComponent.html:51 ERROR Error: No component factory found for DialogComponent. Did you add it to @NgModule.entryComponents?
  at noComponentFactoryError (core.es5.js:3202)
  at CodegenComponentFactoryResolver.webpackJsonp.../../../core/@angular/core.es5.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.es5.js:3267)
  at PortalHostDirective.webpackJsonp.../../../cdk/esm5/portal.es5.js.PortalHostDirective.attachComponentPortal (portal.es5.js:500)
  at MatDialogContainer.webpackJsonp.../../../material/esm5/dialog.es5.js.MatDialogContainer.attachComponentPortal (dialog.es5.js:136)
  at MatDialog.webpackJsonp.../../../material/esm5/dialog.es5.js.MatDialog._attachDialogContent (dialog.es5.js:635)
  at MatDialog.webpackJsonp.../../../material/esm5/dialog.es5.js.MatDialog.open (dialog.es5.js:538)
  at MenuComponent.webpackJsonp.../../../../../src/app/menu/menu.component.ts.MenuComponent.openDialog (menu.component.ts:46)
  at Object.eval [as handleEvent] (MenuComponent.html:51)
  at handleEvent (core.es5.js:11998)
  at callWithDebugContext (core.es5.js:13467)

在@NgModule的entryComponents声明组件:

@NgModule({
  imports: [
    CommonModule,
    AppRoutingModule
  ],
  entryComponents: [DialogComponent],
  declarations: [DialogComponent],
  providers: [AppService]
})
export class AppModule { }

在例子里DialogComponent是一个弹出框组件,动态加载。

版权声明:著作权归作者所有。

相关推荐

纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件:document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值:loading:文档正在加载interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。comple

Angular入口组件(entry component)和声明式组件的区别

Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。声明式组件是通过组件声明的selector加载入口组件(entry component)是通过组件的类型动态加载声明式组件声明式组件会在模板里通过组件声明的selector加载组件。示例@Component({   selector: 'a-cmp',   templat