Dynamic Load Component Not Work In Production

Question

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)

Answer 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