1

I am trying to dynamically load template for one of my component. Below is a code snippet I have written. This works fine in development mode. But in production it fails. Probably due to AOT. 

 ngAfterViewInit(): void {
    const moduleName = this._module.instance.constructor.name;
    const tmpCmp = Component({
      moduleId: moduleName,
      templateUrl: '/assets/templates/faqs/faqs.' + environment.vendor_prefix + '.component.html'
    })(class {});
    const tmpModule = NgModule({ declarations: [tmpCmp] })(class {});
    this._compiler.compileModuleAndAllComponentsAsync(tmpModule).then(factories => {
      const factory = factories.componentFactories[0];
      const cmpRef = factory.create(this._injector, [], null, this._module);
      cmpRef.instance.name = 'dynamic';
      this.vc.insert(cmpRef.hostView);
    });
  }

I am getting an error message as Runtime compiler is not loaded.

I tried searching for a solution on stackoverflow but got some unanswered questions. Can someone help me with this?

Mahesh
  • 1,427
  • 2
  • 19
  • 42
  • I'm fairly sure this won't work with AOT. Is the vendor_prefix constant for each build you are producing? If so you could achieve the same result using `fileReplacements` – noggin182 Aug 05 '19 at 15:41
  • FileReplacement doesn't work with template URL – Mahesh Aug 05 '19 at 16:48
  • Does the above work in production if you have a static URL? If so could you use fileReplacements to switch between different versions of the same code that dynamically create your component each with it's own hard coded URL – noggin182 Aug 05 '19 at 20:29
  • No it doesn't. If I understand it right, AOT does not ship a compiler in a build. Because of that this approach fails for production, but works in development environment. – Mahesh Aug 06 '19 at 01:39

0 Answers0