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) { }
}

1.仪表盘/mainMainPageComponent.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 });

          }
        }

仪表盘/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？

有人可以找出我做错了什么吗？

提前致谢。

最佳答案

我认为这只是一个错字：
在entryComponents中，您已编写ChartsComponent；在resolveComponentFactory方法中，您已编写了ChartComponent。

可以吗？