找不到组件工厂。您是否将其添加到@ NgModule.entryComponents？ [英] No component factory found. Did you add it to @NgModule.entryComponents?

问题描述

在将ag-grid与angular4一起使用时，我会遇到以下错误消息。

While using ag-grid with angular4, I'm stuck with below error message.

我正在尝试通过HTTP提取json后显示行数据。 / p>

I'm trying to display row data after fetch json via HTTP.

this.gridOptions.api.setRowData(this.gridOptions.rowData);

但是我的代码是在错误消息下面制作的。

But my code made below error message.

错误错误：没有为RedComponentComponent找到组件工厂。您将
添加到@ NgModule.entryComponents吗？

ERROR Error: No component factory found for RedComponentComponent. Did you add it to @NgModule.entryComponents?

这是我的应用程序模块代码。我已经设置为entryComponents。

This is my app module code. I'd already set to entryComponents.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AgGridModule} from "ag-grid-angular/main";

import { AppComponent } from './app.component';
import { MyGridApplicationComponent } from './my-grid-application/my-grid-application.component';
import { RedComponentComponent } from './red-component/red-component.component';

@NgModule({
  imports: [
    BrowserModule,
    AgGridModule.withComponents(
      [RedComponentComponent]
    ),
    FormsModule,
    HttpModule
  ],
  declarations: [
    AppComponent,
    MyGridApplicationComponent,
    RedComponentComponent
  ],
  entryComponents: [
    RedComponentComponent
  ],  
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的代码的错误位置

我的问题。为什么此代码无法解析此组件。

My Question. Why this code can't resolve this component.

推荐答案

您正在传递 string 到`ComponentFactoryResolver，但它应该是组件类型。

You are passing string to `ComponentFactoryResolver when loading data from server but it should be component type.

header.json

{
  "headerName": "DetailCode",
  "field": "detailCode",
  "cellRendererFramework": "RedComponentComponent", // string
  "width":100
},

要解决它，我会创建条目组件图，例如：

to solve it i would create entry components map like:

entry-components.ts

import { RedComponentComponent } from './red-component/red-component.component';

export const entryComponentsMap = {
  'RedComponentComponent': RedComponentComponent
};

然后从json字符串映射加载到组件类

and then map loading from json string to component class

comm-code-grid-option.service.ts

private fetchColumnDefs() {
 console.log("fetchColumnDefs()");

 this.http.get(this.API_URI + "resident/header.json").subscribe(
   r => {
     this.gridOptions.columnDefs = r.json();
     this.gridOptions.columnDefs.forEach((x: any) => {
       if (x.cellRendererFramework) {
         x.cellRendererFramework = entryComponentsMap[x.cellRendererFramework];
       }
     });

这篇关于找不到组件工厂。您是否将其添加到@ NgModule.entryComponents？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！