Javascript 在angular 7中动态加载组件时出错。找不到组件工厂

我需要动态加载组件来查看一些按钮点击。 我已经在自定义模块中创建了on指令和一些组件。 但当我尝试创建组件的新实例时，它说找不到组件工厂

这是我的代码结构

仪表板模块

 @NgModule({
      declarations: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent, InsertionDirective],
      imports: [
        CommonModule,
        GridsterModule,
        ButtonsModule,
        ChartsModule,
        DropDownsModule
      ],
      entryComponents: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent],
      exports: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent]
    })
    export class DashboardModule {
      static customization(config: any): ModuleWithProviders {
        return {
          ngModule: DashboardModule,
          providers: [
            { provide: Service, useClass: config.service }
          ]
        }
      }
    }

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInsertion]'
})
export class InsertionDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }
}

仪表板/插入指令

 @NgModule({
      declarations: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent, InsertionDirective],
      imports: [
        CommonModule,
        GridsterModule,
        ButtonsModule,
        ChartsModule,
        DropDownsModule
      ],
      entryComponents: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent],
      exports: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent]
    })
    export class DashboardModule {
      static customization(config: any): ModuleWithProviders {
        return {
          ngModule: DashboardModule,
          providers: [
            { provide: Service, useClass: config.service }
          ]
        }
      }
    }

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInsertion]'
})
export class InsertionDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }
}

1。仪表板/mainpagecomponent.ts

 import { Component, OnInit, ViewChild, ComponentFactoryResolver, ComponentRef, Type } from '@angular/core';
        import { Service } from 'src/app/services/service';
        import { Widget } from 'src/app/interface/widget';
        import { GridsterConfig, GridsterItem } from 'angular-gridster2';
        import { SETTINGS } from '../settings'
        import { InsertionDirective } from '../insertion.directive';
        import { ChartComponent } from '@progress/kendo-angular-charts';


        @Component({
          selector: 'dasbhoard-main-page',
          templateUrl: './main-page.component.html',
          styleUrls: ['./main-page.component.css']
        })
        export class MainPageComponent implements OnInit {
          componentRef: ComponentRef<any>;
          childComponentType: Type<any>;
          @ViewChild(InsertionDirective)
          insertionPoint: InsertionDirective;

          public title: string;
          public widgets: Array<{ widget: Widget, grid: GridsterItem, type: string }> = [];
          public options: GridsterConfig;

          constructor(private service: Service, private componentFactoryResolver: ComponentFactoryResolver) {
            this.title = 'Dashboard';
          }


          ngOnInit() {
            this.options = {
              itemChangeCallback: MainPageComponent.itemChange,
              itemResizeCallback: MainPageComponent.itemResize,
            };

          }
          addNewWidget(type: string) {
            let widgetType = SETTINGS.widgetSetting[type];
            let totalWidgets = this.widgets ? this.widgets.length : 0;

            let componentFactory = this.componentFactoryResolver.resolveComponentFactory(widgetType.useClass);
//widgetType.useClass = ChartsComponent
// when I pass it statically its ok 
            //error here 
            let viewContainerRef = this.insertionPoint.viewContainerRef;
            viewContainerRef.clear();
            this.componentRef = viewContainerRef.createComponent(componentFactory);

            this.widgets.push({ widget: { id: totalWidgets, header: `Widget ${totalWidgets} Header`, content: `<h1>Widget ${totalWidgets} Body</h4>` }, grid: { cols: 1, rows: 1, x: 0, y: 0 }, type: type });

          }
        }

从'@angular/core'导入{Component，OnInit，ViewChild，ComponentFactoryResolver，ComponentRef，Type}；
从'src/app/services/Service'导入{Service}；
从'src/app/interface/Widget'导入{Widget}；
从'angular-gridster2'导入{GridsterConfig，GridsterItem}；
从“../SETTINGS”导入{SETTINGS}
从“../insertion.directive”导入{InsertionDirective}；
从'@progress/kendo angular charts'导入{ChartComponent}；
@组成部分({
选择器：“DASBCADE主页”，
templateUrl:'./main page.component.html'，
样式URL:['./main page.component.css']
})
导出类MainPageComponent实现OnInit{
componentRef:componentRef；
childComponentType：类型；
@ViewChild（插入方向）
插入点：InsertionDirective；
公共标题：字符串；
公共小部件：数组=[]；
公共选项：GridsterConfig；
构造函数（专用服务：服务，专用componentFactoryResolver:componentFactoryResolver）{
this.title='Dashboard'；
}
恩戈尼尼特（）{
此选项={
itemChangeCallback:MainPageComponent.itemChange，
itemResizeCallback:MainPageComponent.itemResize，
};
}
addNewWidget（类型：字符串）{
让widgetType=SETTINGS.widgetSetting[type]；
让totalWidgets=this.widgets？this.widgets.length:0；
让componentFactory=this.componentFactoryResolver.resolveComponentFactory（widgetType.useClass）；
//widgetType.useClass=ChartsComponent
//当我通过它的静态它的ok
//这里出错
让viewContainerRef=this.insertionPoint.viewContainerRef；
viewContainerRef.clear（）；
this.componentRef=viewContainerRef.createComponent（componentFactory）；
push（{widget:{id:totalWidgets，header:`widget${totalWidgets}header`，content:`widget${totalWidgets}Body`}，grid:{cols:1，rows:1，x:0，y:0}，type:type}）；
}
}

仪表板/main component/main component.html

<ng-template appInsertion> </ng-template>     
<button kendoButton(click) = "addNewWidget('charts')"[primary] = "true" class="pull-right" > Add Chart Widget </button>

添加图表小部件

我有每一篇文章，都说你需要在入口点中插入组件，但我已经把所有组件都包括在入口点中了。所有组件都在同一个模块内，但它仍然表示没有为ChartsComponent找到任何组件工厂。您是否将其添加到@NgModule.entryComponents

谁能帮我找出我做错的地方吗

提前谢谢。

我想这只是一个打字错误： 在您编写的entryComponentsChartsComponent和resolveComponentFactory方法中ChartComponent

---

可能是这样吗？

但这只是一个问题。你可以查看我上面的代码。当我通过resolveComponentFactory（widgetType.useClass）时；它显示错误，但当我执行resolveComponentFactory（ChartsComponent）时；好吧，好吧，那么我将删除我答案中的最后一段。现在一切都正常了吗？当我静态地传递组件时，它工作了，但是当动态地传递组件时，它显示了相同的错误。esolveComponentFactory（widgetType.useClass）；它显示错误，但当我执行resolveComponentFactory（ChartsComponent）时，它可以工作。