动态负载组件在生产中不起作用 [英] Dynamic Load Component Not Work In Production

问题描述

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

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

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

<块引用>

ERROR 错误:未找到未定义的组件工厂.你加了吗到@NgModule.entryComponents?在 Wt (main.b98d71b6b5a909371223.js:1)在 e.resolveComponentFactory (main.b98d71b6b5a909371223.js:1)

解决方案

实际上，这在开发和构建中运行良好，因为 Angular 编译器不会更改组件的名称.在这一行

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

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

你可以像这样通过组件选择器进行搜索；

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

<块引用>

选择器未在作品中更改

希望对你有帮助

I am using Angular 6 and I am trying to load component dynamically by it's name when user click on tab load component by name for this I am using the following code witch is working perfect on build but not work in build --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;
  }

when user click on tab I load the related component in production its return the following error

ERROR Error: No component factory found for undefined. Did you add it to @NgModule.entryComponents? at Wt (main.b98d71b6b5a909371223.js:1) at e.resolveComponentFactory (main.b98d71b6b5a909371223.js:1)

解决方案

Actually, this works fine in development and build since angular compiler not changing the name of component. in this line

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

you are searching for component by it's name but in production this name changed you can detect this by print the factories

instead of you can search by component selector like this;

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

selector not changed on productions

Hope this help you

这篇关于动态负载组件在生产中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！