未找到未定义的组件工厂。你把它添加到@NgModule.entryComponents了吗

Question

我创建了一个 Angular 6 组件库。该库基于 PrimeNG 组件。库中的组件之一是 table 组件（基于 PrimeNG table）

为了允许库的用户在 table 的单元格中添加动态模板，我（在库中）创建了一个名为“VarintComponent”的组件，该组件有两个输入：

1) 来宾组件：字符串

2) GuestComponentData: 任意

table 的用户可以声明列包含 VariantComponent，并将组件名称传递给 GuestComponent Input。在运行时，VariantComponent 使用 componentFactoryResolver 和 viewContainerRef.

动态创建和加载组件

import { Component, OnInit, Input, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { Type } from '@angular/core';
import { VariantComponentDirective } from './variant-component.directive';

@Component({
  selector: 'o-variant',
  template: `
        <ng-template variantComponent></ng-template>
        `
})
export class VariantComponent implements OnInit {
  @Input() GuestComponent: String;
  @Input() GeustComponentData: any;

  @ViewChild(VariantComponentDirective) variantHost: VariantComponentDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit() {
    this.loadComponent();
  }

  loadComponent() {
    const viewContainerRef = this.variantHost.viewContainerRef;
    viewContainerRef.clear();

    const factories = Array.from(this.componentFactoryResolver['_factories'].keys());
    const factoryClass = <Type<any>>factories.find((x: any) => x.name === (this.GuestComponent));
    const factory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);
    const compRef = viewContainerRef.createComponent(factory);

    (<any>compRef.instance).data = this.GeustComponentData;
  }

}

来宾组件需要实现简单的接口才能托管在 VariantComponent 中。

访客组件也被声明为它们模块的“entryComponents”。

在另一个项目中使用 table 时，我可以看到所有工作正常并且 Gust 组件正确托管在 VarintComponent 中并显示在 table 中。

问题是在构建生产包时（使用 ng build --prod）我得到：

main.11fb9744a37aae5b78f8.js:1 ERROR Error: No component factory found for undefined. Did you add it to @NgModule.entryComponents?

无论来宾组件位于库还是客户端项目中，我都会收到此错误。

如果我使用 ng build --build-optimizer=false

进行构建，代码运行良好

Answer 1

找到问题了。问题出在以下行：

const factoryClass = <Type<any>>factories.find((x: any) => x.name === (this.GuestComponent));

当使用 --prod 打包时，包变得丑陋并且 class 名称被更改，因此我们无法通过名称进行比较。所以我们需要通过引用传递组件。以下代码运行良好：

import { Component, OnInit, Input, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { VariantComponentDirective } from './variant-component.directive';


@Component({
  selector: 'o-variant',
  template: `
        <ng-template variantComponent></ng-template>
        `
})
export class VariantComponent implements OnInit {
  @Input() GuestComponent: any;
  @Input() GeustComponentData: any;

  @ViewChild(VariantComponentDirective) variantHost: VariantComponentDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit() {
    this.loadComponent();
  }

  loadComponent() {
    const viewContainerRef = this.variantHost.viewContainerRef;
    viewContainerRef.clear();
    const factory = this.componentFactoryResolver.resolveComponentFactory(this.GuestComponent);
    const compRef = viewContainerRef.createComponent(factory);
    (<any>compRef.instance).data = this.GeustComponentData;
  }

}

未找到未定义的组件工厂。你把它添加到@NgModule.entryComponents了吗

No component factory found for undefined. Did you add it to @NgModule.entryComponents

angular

angular-library

angular-cli-v6