コンポーネントファクトリが見つかりません。 @ NgModule.entryComponentsに追加しましたか？

Question

angular4でag-gridを使用しているときに、以下のエラーメッセージが表示されます。

HTTP経由でjsonを取得した後に行データを表示しようとしています。

私のコードは以下のエラーメッセージです。

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

これは私のアプリケーションモジュールのコードです。私はすでに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 { } 

error position of my code

私の質問。このコードがこのコンポーネントを解決できない理由

Answer 1

サーバからデータを読み込むときには、stringを `ComponentFactoryResolver 'に渡しますが、コンポーネント型でなければなりません。次いで

エントリcomponents.ts

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

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

とからロードマップ：私はエントリコンポーネントは次のようにマップ作成し、それを解決する

header.json

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

json文字列からコンポーネントクラスへ

COMM-コード・グリッド・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]; 
     } 
    });