Angular 4:没有找到组件工厂,你是否将它添加到@ NgModule.entryComponents？

Question

我在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

如何解决这个问题.谢谢

Answer 1

在你的module.ts中添加这个,

declarations: [
  AppComponent,
  ConfirmComponent
]

如果ConfirmComponent在另一个模块中,你需要将它导出到那里,这样你可以在外面使用它,添加:

exports: [ ConfirmComponent ]

Answer 2

查看有关entryComponent的详细信息:

如果要动态加载任何组件,那么我们需要同时放入Declarations和entryComponent:

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

Answer 3

TL; DR:使用providedIn的ng6中的服务:当app.module的entryComponents中未添加Component时,"root"无法找到ComponentFactory.

如果您使用角度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;
  }
}

问题是

提供:"根"

definition,在app.module中提供此服务

因此,如果您的服务位于例如"OverlayModule"中,您也在其中声明了OverlayExampleComponent并将其添加到entryComponents,则该服务无法找到OverlayExampleComponent的ComponentFactory.

Answer 4

我遇到过同样的问题.在这种情况下imports [...]至关重要,因为如果不导入它将无法工作NgbModalModule.

错误描述说应该将组件添加到entryComponents数组中,这很明显,但请确保您首先添加了这个组件:

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

Answer 5

将该组件添加到应用程序模块的@NgModule中的entryComponents:

entryComponents:[ConfirmComponent],

以及声明:

declarations: [
    AppComponent,
    ConfirmComponent
]

Answer 6

在importComponents App.module.ts中添加导入中的'NgbModalModule'和组件名称,如下所示

Answer 7

将动态创建的组件放在@NgModuledecorator函数下的entryComponents中.

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

Answer 8

我对角度6有同样的问题,这对我有用:

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

})

如果您有像ConfirmService这样的服务,则必须在当前模块的提供者中声明而不是root

Answer 9

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

从'@ ng-bootstrap / ng-bootstrap'导入{NgbModal};

如果是这种情况，只需将组件添加到模块声明和entryComponents中，如其他响应所建议的那样，还要将此添加到模块中

从'@ ng-bootstrap / ng-bootstrap'导入{NgbModule};

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

Answer 10

当您尝试动态加载组件并执行以下操作时，会发生此错误：

1. 您要加载的组件不是路由模块
2. 该组件在模块entryComponents中为否。

在routingModule中

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

或在模块中

entryComponents: [
ConfirmComponent
} 

要解决此错误，您可以将路由器添加到组件或将其添加到模块的entryComponents。

1. 将路由器添加到component.drawback这种方法是您的组件将可以通过该URL访问。
2. 将其添加到entryComponents。在这种情况下，您的组件将不会附加任何url，并且无法使用url访问。

Answer 11

创建动态组件时，在Angular7中遇到了相同的问题。有两个组件（TreatListComponent，MyTreatComponent）需要动态加载。我刚刚在我的app.module.ts文件中添加了entryComponents数组。

entryComponents: [
TreatListComponent,
MyTreatComponent

]，

Answer 12

就我而言，我忘记MatDialogModule在子模块中添加导入。

Answer 13

如果您在应用程序中使用路由

确保将新组件添加到路由路径中

例如 ：

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