title: Angular 6 - Create Modules dynamically at runtime with AOT compilation
body: <p>I am trying to load create module dynamically and add them to route via <code>loadChildren</code>. The main reason for this approach is driven by the fact that routes config should be loaded from a <code>json</code> file.</p>
  
  <p>So I have <code>canActivate</code> guard that is responsible for creating the module</p>
  
  <pre><code>loadFeatureModule(loadChildren: string): Observable&lt;Type&lt;any&gt;&gt; {
  
    this.getRoutes(loadChildren).pipe(
      switchMap(({ routes }) =&gt; {
        const featureModule = NgModule({
          imports: [
            RouterModule.forChild(routes)
          ]
        })(class { });
        return this.compiler.compileModuleAsync(featureModule);
      }),
      map(m =&gt; m.moduleType)
    );
  }
  </code></pre>
  
  <p>and add feature modules to the route:</p>
  
  <pre><code>addFeatureModule = (loadChildren: string, path: string): Partial&lt;Route&gt; =&gt; {
    return {
      path: path,
      loadChildren: this.loadFeatureModule(loadChildren)
    };
  }
  </code></pre>
  
  <p>And at the very end, the I reset the router config with the new routes. This works fine with JIT compiler but it won't load any of the routes with the AOT compiler.</p>
  
  <p>I have also tried to inject the JitComplier to the application by introducing these new providers:</p>
  
  <pre><code>providers: [
    { provide: COMPILER_OPTIONS, useValue: {}, multi: true },
    { provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS] },
    { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] }
  ]
  
  export function createCompiler(compilerFactory: CompilerFactory) {
    return compilerFactory.createCompiler();
  }
  </code></pre>
  
  <h2>Update</h2>
  
  <p>Please use this <a href="https://github.com/nikrooz/dynamic-module" rel="nofollow noreferrer">repo</a> to reproduce the problem</p>
  
  <h3>Problems</h3>
  
  <p>After further investigations I have identified 2 problems:</p>
  
  <ol>
  <li><p><code>AOT</code> and <code>buildOptimizer</code> remove the angular decorators like <code>NgModule</code> and <code>Component</code> which is needed for compiling dynamic modules. Apparently there is no solution for <code>buildOptimizer</code> and I found this nasty <a href="https://github.com/angular/angular-cli/issues/9306#issuecomment-361419295" rel="nofollow noreferrer">hack</a> for <code>AOT</code>, but is there a better solution for this?</p></li>
  <li><p>When creating a module dynamically the <code>templateUrl</code> of any components declared directly/indirectly in the dynamic module cannot be loaded. In my example, this means I cannot import <code>LayoutModule</code> in to the dynamic module, as it declares a component that uses <code>templateUrl</code>.This is caused by the fact that <code>ResourceLoader</code> has been provided when compiled the application using <code>AOT</code>.</p></li>
  </ol>