title: Angular 5 - Dynamic component template loading
body: <p>In my Angular 5 project I need to create one component dynamically after API data is downloaded (I have HTML code inside with Angular markups - I need to compile them after request is done), but I see there is the problem with AOT. </p>
  
  <p>I've tried to use solution from that topic <a href="https://stackoverflow.com/questions/47531355/angular-4-template-bind-through-innerhtml-component-variables-are-not-accessi">Angular 4 | Template bind through innerHTML, component variables are not accessible (damContentRoot is this case)</a> (and from that <a href="https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular">How can I use/create dynamic template to compile dynamic Component with Angular 2.0?</a>)</p>
  
  <p>Here is my current code:</p>
  
  <pre><code>import {
      Directive,
      OnChanges,
      Input,
      ComponentRef,
      ViewContainerRef,
      Compiler,
      ModuleWithComponentFactories,
      Component,
      NgModule,
      Type
  } from '@angular/core';
  
  import {CommonModule} from '@angular/common';
  import { FormsModule, ReactiveFormsModule, NgForm }   from '@angular/forms';
  import {JitCompilerFactory} from '@angular/platform-browser-dynamic';
  
  
  
  
  
  @Directive({selector: '[compile]'})
  export class CompileDirective implements OnChanges {
      @Input()compile : string;
      @Input()compileContext : any;
  
      compRef : ComponentRef &lt; any &gt;;
  
      constructor(private vcRef : ViewContainerRef, private compiler : Compiler) {}
  
      ngOnChanges() {
          if (!this.compile) {
              if (this.compRef) {
                  this.updateProperties();
                  return;
              }
              throw Error('You forgot to provide template');
          }
  
          this
              .vcRef
              .clear();
          this.compRef = null;
  
          const component = this.createDynamicComponent(this.compile);
          const module = this.createDynamicModule(component);
          this
              .compiler
              .compileModuleAndAllComponentsAsync(module)
              .then((moduleWithFactories : ModuleWithComponentFactories &lt; any &gt;) =&gt; {
                  let compFactory = moduleWithFactories
                      .componentFactories
                      .find(x =&gt; x.componentType === component);
  
                  this.compRef = this
                      .vcRef
                      .createComponent(compFactory);
                  this.updateProperties();
              })
              .catch(error =&gt; {
                  console.log(error);
              });
      }
  
      updateProperties() {
          for (var prop in this.compileContext) {
              this.compRef.instance[prop] = this.compileContext[prop];
          }
      }
  
      private createDynamicComponent(template : string) {
          @Component({selector: 'custom-dynamic-component', template: template})
          class CustomDynamicComponent {}
          return CustomDynamicComponent;
      }
  
      private createDynamicModule(component : Type &lt; any &gt;) {
          @NgModule({
              // You might need other modules, providers, etc... Note that whatever components
              // you want to be able to render dynamically must be known to this module
              imports: [CommonModule, FormsModule, ReactiveFormsModule],
              declarations: [component],
          })
          class DynamicModule {}
          return DynamicModule;
      }
  }
  </code></pre>
  
  <p><code>&lt;ng-container *compile="this.pageData.html; context: this"&gt;&lt;/ng-container&gt;</code></p>
  
  <p>But I'm getting error :
  <code>ERROR Error: Runtime compiler is not loaded</code></p>
  
  <p>I've tried to use JitCompilterFactory also but I'm getting error like there : <a href="https://github.com/angular/angular/issues/20639" rel="nofollow noreferrer">https://github.com/angular/angular/issues/20639</a>.</p>
  
  <p>Is there any way to to add component at runtime with aot compilation ? Or it's not making any sens to combine it together with JIT?</p>
  
  <p>I've read whole topic about dynamic component loading (<a href="https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e" rel="nofollow noreferrer">https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e</a>) and I still can't find solution, always <code>JitCompilerFactory</code> error.</p>