357

我正在使用带有 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

我该如何解决？

4

25 回答 25

527

将此添加到您的module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

如果 ConfirmComponent 在另一个模块中，您需要将其导出到那里，以便您可以在外部使用它，添加：

exports: [ ConfirmComponent ]

---更新 Angular 9 或 Angular 8 并明确启用 Ivy ---

不再需要使用 Ivy 的入口组件，现在已弃用

---对于禁用常春藤的 Angular 9 和 8---

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

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

根据entryComponents的定义

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

于 2017-10-28T13:55:16.707 回答
153

请参阅有关以下内容的详细信息entryComponent：

如果您正在动态加载任何组件，那么您需要将它放在两个declarations和中entryComponent：

@NgModule({
  imports: [...],
  exports: [...],
  entryComponents: [ConfirmComponent,..],
  declarations: [ConfirmComponent,...],
  providers: [...]
})
于 2018-12-05T14:50:46.607 回答
66

TL；DR：当 app.module 中未添加组件时，ng6 中的服务无法找到providedIn: "root"ComponentFactory 。entryComponents

如果您将 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;
  }
}

问题是

提供在：“根”

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

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

于 2018-08-13T23:35:36.637 回答
55

我遇到过同样的问题。在这种情况下imports [...]是至关重要的，因为如果你不 import 它将不起作用NgbModalModule。

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

imports: [
    ...
    NgbModalModule,
    ...
  ],
于 2018-07-04T09:07:50.947 回答
25

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

entryComponents:[ConfirmComponent],

以及声明：

declarations: [
    AppComponent,
    ConfirmComponent
]
于 2018-10-08T10:45:25.953 回答
15

在 import 中添加“NgbModalModule”，在 entryComponents App.module.ts 中添加您的组件名称，如下所示 在此处输入图像描述

于 2019-02-05T12:04:16.797 回答
10

我对 angular 6 有同样的问题，这对我有用：

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

})

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

于 2018-12-18T13:46:55.010 回答
8

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

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

如果这是您的情况，只需按照其他响应的建议将该组件添加到模块声明和 entryComponents 中，但也将其添加到您的模块中

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

imports: [
   NgbModule.forRoot(),
   ...
]
于 2018-11-24T17:17:13.303 回答
8

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

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],
于 2019-01-24T08:36:52.863 回答
8

当您尝试动态加载组件并且：

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

在路由模块中

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

或在模块中

entryComponents: [
ConfirmComponent
}

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

  1. 将路由器添加到组件。这种方法的缺点是您的组件将可以通过该 url 访问。
  2. 将其添加到 entryComponents。在这种情况下，您的组件将不会附加任何 url，并且无法通过 url 访问它。
于 2019-01-31T09:24:00.600 回答
7

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

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

例如 ：

    const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: 'fundList',      component: FundListComponent },
];
于 2018-04-04T06:53:38.333 回答
7

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

于 2019-12-19T18:12:29.213 回答
3

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

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

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

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

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

于 2019-01-06T21:30:33.143 回答
3

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

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

于 2019-01-17T08:58:53.147 回答
3
  1. entryComponents至关重要。上面的答案是正确的。

但...

  1. 如果您提供打开模式的服务（一种常见模式），并且定义对话框组件的模块未在 AppModule 中加载，则需要更改providedIn: 'root'为providedIn: MyModule. 作为一般的良好做法，您应该只使用providedIn: SomeModule模块中的所有对话服务。
于 2020-01-17T16:46:58.730 回答
3

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

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

于 2020-04-15T13:28:50.413 回答
2

在这里澄清一下。如果您没有ComponentFactoryResolver直接在组件中使用，并且您想将其抽象为服务，然后将其注入到组件中，您必须在该模块的提供程序下加载它，因为如果延迟加载它将不起作用。

于 2019-05-30T12:24:44.513 回答
2

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

于 2019-06-11T21:06:17.620 回答
2

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

于 2019-07-29T11:36:17.410 回答
2

我导入了材料设计对话框模块，所以我为对话框创建了 aboutcomponent 从 openDialog 方法调用这个组件然后我得到了这个错误，我只是把这个

declarations: [
    AppComponent,
    ExampleDialogComponent
  ],

  entryComponents: [
    ExampleDialogComponent
  ],
于 2020-06-28T10:31:01.697 回答
0

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

imports: [
    ...
    TheModuleThatOwnTheTargetedComponent,
    ...
  ],
于 2019-12-11T12:17:58.847 回答
0

就我而言，我通过以下方式解决了这个问题：
1）放入NgxMaterialTimepickerModule2 app module imports:[ ]
）放入NgxMaterialTimepickerModule3 testmodule.ts imports:[ ]
）testcomponent放入declartions:[ ]和entryComponents:[ ]

（我正在使用 Angular 8+ 版本）

于 2020-03-14T16:25:48.427 回答
0

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

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

无论如何，如果有人可以阐明为什么空的 ngOnInit 会导致此错误，我很乐意阅读评论。

于 2020-07-14T02:18:05.837 回答
0

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

 entryComponents: [
CityModalComponent
],
于 2020-08-05T09:00:20.933 回答
-2

我可能在这方面回复晚了。但是对于一些仍在寻找解决此问题并在其代码中包含此问题的人来说，删除它可能会有所帮助。我们的 tsconfig.json 文件中早就有了以下条目：

  "angularCompilerOptions": {
    "enableIvy": false
  }

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

于 2020-11-02T12:19:50.010 回答