Angular 4:没有找到组件工厂，你把它添加到@NgModule.entryComponents了吗?

我正在使用带有webpack的Angular 4模板 当我尝试使用一个组件(ConfirmComponent)时，我有这个错误:

没有为ConfirmComponent找到组件工厂。你加进去了吗 @NgModule.entryComponents吗?< / p >

该组件在app.module.server.ts中声明

@NgModule({
bootstrap: [ AppComponent ],
imports: [
// ...
],
entryComponents: [
ConfirmComponent,
],
})
export class AppModule { }

我还有app.module.browser.ts和app.module.shared.ts

我该怎么解决呢?

415332 次浏览
小开
最佳答案

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

declarations: [
AppComponent,
ConfirmComponent
]

如果ConfirmComponent在另一个模块中，你需要导出它，这样你就可以在外面使用它，添加:

exports: [ ConfirmComponent ]

更新Angular 9或Angular 8，显式启用Ivy

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

——用于禁用了Ivy的Angular 9和8——

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

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

根据entryComponents的定义

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

小开

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

确保在路由路径中添加新组件

例如:

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

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

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

imports: [
...
NgbModalModule,
...
],
小开

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

如果你在使用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;
}
}

问题在于

providedIn:“根”

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

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

小开

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

entryComponents:[ConfirmComponent],

以及声明:

declarations: [
AppComponent,
ConfirmComponent
]
小开

我对引导模态也有同样的问题

import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

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

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

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

查看详细信息关于entryComponent:

如果你动态加载任何组件，那么你需要把它放在declarations和entryComponent中:

@NgModule({
imports: [...],
exports: [...],
entryComponents: [ConfirmComponent,..],
declarations: [ConfirmComponent,...],
providers: [...]
})
小开
我在角6上也有同样的问题， 

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


})

如果你有一个像ConfirmService这样的服务，必须在当前模块的提供者中声明，而不是根

小开

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

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

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

如果一个组件将被包含在模态中，你只需要将它添加到entryComponents中。从文档中可以看出:

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

.
小开

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

< p >进口:( StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ), < / p >
小开

我在Angular7中创建动态组件时也遇到了同样的问题。有两个组件(TreatListComponent, MyTreatComponent)需要动态加载。我只是在我的app.module.ts文件中添加了entryComponents数组。

    entryComponents: [
TreatListComponent,
MyTreatComponent
],
小开

此错误发生在您尝试动态加载组件时，并且:

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

在routingModule

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

或者在模块中

entryComponents: [
ConfirmComponent
}

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

  1. 添加路由器到组件。这种方法的缺点是你的 组件将通过该url访问
  2. 将其添加到entryComponents中。在这种情况下，您的组件将没有附加任何url，它将无法通过url访问。
小开
在import中添加'NgbModalModule'，在entryComponents App.module.ts中添加你的组件名称，如下所示 enter image description here < / p >
小开

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

小开

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

小开

我的错误是在.html中调用NgbModal open方法时参数不正确

小开

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

imports: [
...
TheModuleThatOwnTheTargetedComponent,
...
],
小开

在我的例子中，我忘记将MatDialogModule添加到子模块中的导入。

小开
  1. entryComponents至关重要。以上答案是正确的。

但是…

  1. 如果你正在提供一个打开模式(一种常见模式)的服务 如果你的定义对话框组件的模块没有加载到AppModule中，你需要将providedIn: 'root'更改为providedIn: MyModule。作为一般的良好实践，你应该对模块中的所有对话服务使用providedIn: SomeModule
小开
在我的情况下，我解决了这个问题:
1)将NgxMaterialTimepickerModule放在app module imports:[ ]
中 2)将NgxMaterialTimepickerModule放在testmodule.ts imports:[ ]
中 3)在declartions:[ ]和entryComponents:[ ]中放置testcomponent

(我使用的是angular 8+版本)

小开

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

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

小开

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

declarations: [
AppComponent,
ExampleDialogComponent
],


entryComponents: [
ExampleDialogComponent
],
小开

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

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

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

小开

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

 entryComponents: [
CityModalComponent
],
小开

我可能稍后再回复。但是对于那些仍然在寻找这个问题的解决方案并且在他们的代码中有这个的人来说，删除这个可能是有帮助的。我们在tsconfig中有以下条目。json文件:

  "angularCompilerOptions": {
"enableIvy": false
}

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


提交答案