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 ]

对于动态加载的组件，为了生成ComponentFactory，还必须将组件添加到模块的entryComponents中：

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

根据entryComponents的定义

指定在定义此模块时应编译的组件列表。对于此处列出的每个组件，Angular将创建一个ComponentFactory并将其存储在ComponentFactoryResolver中。

Answer 2

See the details关于entryComponent：

如果要动态加载任何组件，则需要将其放在declarations和entryComponent中：

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

Answer 3

TL; DR：当未在 app.module 的providedIn: "root"中添加组件时，带有entryComponents的ng6中的服务找不到ComponentFactory。

如果结合使用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 中提供此服务。

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

Answer 4

我有同样的问题。在这种情况下，imports [...]是至关重要的，因为如果您不导入NgbModalModule，它将无法正常工作。

错误说明说应该将组件添加到entryComponents数组中，这很明显，但是请确保首先添加了该组件：

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

Answer 5

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

entryComponents:[ConfirmComponent],

以及声明：

declarations: [
    AppComponent,
    ConfirmComponent
]

Answer 6

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

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

})

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

中声明。

Answer 7

将动态创建的组件放置到entryComponents 在@NgModuledecorator函数下。

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

Answer 8

在导入中添加“ NgbModalModule”，并在entryComponents App.module.ts中添加您的组件名称，如下所示

Answer 9

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

entryComponents: [
TreatListComponent,
MyTreatComponent

]，

Answer 10

我对引导程序模式有相同的问题

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

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

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

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

Answer 11

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

您要加载的组件不是路由模块
该组件在模块entryComponents中不存在。

在routingModule中

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

或在模块中

entryComponents: [
ConfirmComponent
}

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

向组件添加路由器。这种方法的缺点是该网址即可访问该组件。
将其添加到entryComponents。在这种情况下，您的组件将没有附加任何url，并且无法使用url进行访问。

Answer 12

如果您在应用中使用路由

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

例如：

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

Answer 13

entryComponents是至关重要的。上面关于这个的答案是正确的。

但是...

如果您提供的服务可以打开模式（常见模式）并且定义对话框组件的模块未加载到AppModule中，则需要将providedIn: 'root'更改为providedIn: MyModule。作为一般的好习惯，您应该只将providedIn: SomeModule用于模块中的所有对话框服务。

Answer 14

您应该像这样在{strong>模块中导入NgbModule：

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

Answer 15

我在使用动态组件的ag-grid上遇到了同样的问题。我发现您需要将动态组件添加到ag-grid模块.withComponents []

进口：[ StratoMaterialModule， BrowserModule， AppRoutingModule， HttpClientModule， BrowserAnimationsModule， NgbModule.forRoot（），表格模块 ReactiveFormsModule， AppRoutingModule， AgGridModule.withComponents（ProjectUpdateButtonComponent） ]

Answer 16

就我而言，我根本不需要entryComponents-只需下面链接中所述的基本设置，但是我需要在主应用程序模块和封闭模块中都包括导入。

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

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

如果组件将包含在模态中，则仅需要将其添加到entryComponents中。从文档中：

您可以将现有组件作为模式窗口的内容传递。在这种情况下，请记住将内容组件添加为entryComponents NgModule部分。

Answer 17

我的错误是使用来自.html的错误参数调用NgbModal打开方法

Answer 18

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

Answer 19

此处用于澄清。如果您没有直接在组件中使用ComponentFactoryResolver，并且想要将其抽象为服务，然后将其注入组件，则必须将其加载到该模块的提供程序下，因为如果延迟加载，它将无法工作

Answer 20

如果在entryComponents中提供了组件对话框类后仍然出现错误，请尝试重新启动ng serve-它对我有用。

Answer 21

自定义组件重要声明，在app.module的entryComponents

declarations: [
        AppComponent,
        ChatComponent
    ],
  entryComponents: [
        ChatComponent
    ],

Answer 22

我正在使用Angular8，并且尝试 从另一个模块动态打开组件 ，在这种情况下，您需要import the module进入尝试打开组件的模块，当然，除了 export组件之外，并将其列出到{{1} }数组，就像以前的答案一样。

entryComponents

Answer 23

就我而言，我通过以下方式解决了此问题：
1）将NgxMaterialTimepickerModule放入app module imports:[ ]
2）将NgxMaterialTimepickerModule放入testmodule.ts imports:[ ]
3）将testcomponent放在declartions:[ ]和entryComponents:[ ]

中

（我使用的是Angular 8+版本）

Answer 24

我导入了材料设计对话框模块，所以我创建了aboutcomponent对话框，用于从openDialog方法调用该组件，然后出现此错误，我就把这个

declarations: [
    AppComponent,
    ExampleDialogComponent
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

Answer 25

如果您仍然无法解决此问题-像我一样-这是造成我此错误的原因。正如@jkyoutsey所建议的那样，我确实确实试图创建一个模式组件。通过将组件移至服务并将其注入到页面组件中，我花费了大量时间来遵循他的建议。还将providerIn：'root'更改为MyModule，当然必须将其至少向上移动一级以避免循环引用。我不确定所有人是否真的有必要。

最终解决了8小时的难题的是，不要在我的组件中实现ngOnInit 。即使函数为空，我也盲目地实现了ngOnInit。我倾向于这样做。这可能是一个坏习惯。

无论如何，如果有人能弄清楚为什么一个空的ngOnInit会导致此错误，那么我很想阅读注释。

Answer 26

在此部分中，您必须在declarations: [CityModalComponent]文件的以下部分中输入app.module.ts（模态组件）之外的子组件：

 entryComponents: [
CityModalComponent
],

Answer 27

我可能对此迟到了答复。但这对于仍在寻找该问题解决方案的某些人可能会有所帮助。很久以来，我们在tsconfig.json文件中就有以下条目：

  "angularCompilerOptions": {
    "enableIvy": false
  }

我们也面临同样的问题。经过大量实验，我们从tsconfig.json中删除了此块。现在我们的代码不再抱怨这个问题。

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

27 个答案: