Question

我正在使用Angular 6，并且尝试通过其名称动态加载组件当用户为此按名称单击选项卡加载组件时，我正在使用以下代码，女巫在构建时工作完美，但在构建--production中不起作用

loadTabData(tabname: any) {
    this.selectedTab = tabname;
    var factories = Array.from(this.resolver["_factories"].keys());
    var factoryClass = <Type<any>>(
      factories.find((x: any) => x.name === tabname)
    );
    let viewContainerRef = this.comLoad.viewContainerRef;
    viewContainerRef.clear();
    const factory = this.resolver.resolveComponentFactory(factoryClass);
    let componentRef = viewContainerRef.createComponent(factory);
    componentRef.instance.serviceId = this.serviceId;
  }

当用户单击选项卡时，我在生产中加载相关组件，并返回以下错误

错误错误：找不到未定义的组件工厂。你添加了吗到@ NgModule.entryComponents？在Wt（main.b98d71b6b5a909371223.js：1）在e.resolveComponentFactory（main.b98d71b6b5a909371223.js：1）

Answer 1

实际上，这是因为角度编译器不会更改组件名称，因此在开发和构建中效果很好。在此行

var factories = Array.from(this.resolver["_factories"].keys());
    var factoryClass = <Type<any>>(
      factories.find((x: any) => x.name === tabname)
    );

您正在按名称搜索组件，但在生产中此名称已更改，您可以通过打印工厂来检测到此

您可以像这样按组件选择器进行搜索；

const factories = Array.from(this.resolver["_factories"].values());
    const factory: any = factories.find(
      (x: any) => x.selector === this.selector
    );

选择器在生产中未更改

希望对您有帮助

动态负载组件在生产中不起作用

1 个答案: