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

问题描述

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

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

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

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

希望对您有帮助

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