我使用的是带有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

我该怎么解决呢?


当前回答

我在使用动态组件的ag网格中遇到了同样的问题。我发现你需要在ag-grid模块中添加动态组件。withcomponents []

进口:[ StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ],

其他回答

如果您仍然没有解决这个问题-像我一样-这是导致我这个错误的原因。正如@jkyoutsey所建议的,我确实在尝试创建一个模态组件。根据他的建议,我花了相当多的时间将我的组件移动到一个服务并将其注入到页面组件中。还将providedIn: 'root'更改为MyModule,当然必须至少向上移动一级以避免循环引用。我不确定这些是否真的有必要。

最终解决8个小时难题的是在我的组件中不实现ngOnInit。我盲目地实现了ngOnInit,即使函数是空的。我倾向于那样做。这可能是一个不好的做法。

无论如何,如果有人能解释为什么空的ngOnInit会导致这个错误,我很乐意阅读评论。

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

TL;DR: ng6中带有providedIn: "root"的服务在app.module的entryComponents中没有添加组件时,无法找到ComponentFactory。

如果你在使用angular 6的同时在服务中动态创建组件,也会出现这个问题!

例如,创建一个Overlay:

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

  constructor(private _overlay: Overlay) {}

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

    overlayRef.attach(portal).instance;
  }
}

问题在于

提供于:“根”

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

因此,如果你的服务位于,例如,“OverlayModule”中,在那里你也声明了OverlayExampleComponent并将其添加到entryComponents中,该服务无法为OverlayExampleComponent找到ComponentFactory。

我也有同样的问题。在这种情况下进口[…]]是至关重要的,因为如果你不导入NgbModalModule,它将无法工作。

错误描述说组件应该添加到entryComponents数组中,这是显而易见的,但请确保您已经在第一个位置添加了这个:

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

你应该像这样在模块中导入NgbModule:

@NgModule ({ 声明:[ AboutModalComponent ], 进口:[ CommonModule, SharedModule, RouterModule, FormsModule, ReactiveFormsModule, NgxLoadingModule, NgbDatepickerModule, NgbModule ], entryComponents (AboutModalComponent): }) 导出类HomeModule {}