Search code examples
angular5angular2-aot

Angular5:compileModuleAndAllComponentsSync not working with AoT

I am working on a project wherein I need to use --prod flag to build the angular code.
In one of our module there is a component which is being created at run-time. The project works fine when build with dev environment. But when --prod flag is used the project gets build successfully but throws a run-time exception at methos 'compileModuleAndAllComponentsSync()'. I have googled a lot for this but didn't find any promising solution. Can anybody help me in this?

Excepton Details: 

main.0c80be8a6ff7c0136620.bundle.js:1 ERROR Error: Runtime compiler is not loaded
at fe (main.0c80be8a6ff7c0136620.bundle.js:1)
at e.compileModuleAndAllComponentsSync (main.0c80be8a6ff7c0136620.bundle.js:1)
at e.addComponent (main.0c80be8a6ff7c0136620.bundle.js:1)
at e.onSubmit (main.0c80be8a6ff7c0136620.bundle.js:1)
at Object.handleEvent (main.0c80be8a6ff7c0136620.bundle.js:1)
at Object.handleEvent (main.0c80be8a6ff7c0136620.bundle.js:1)
at Object.handleEvent (main.0c80be8a6ff7c0136620.bundle.js:1)
at cn (main.0c80be8a6ff7c0136620.bundle.js:1)
at main.0c80be8a6ff7c0136620.bundle.js:1
at HTMLButtonElement.<anonymous> (main.0c80be8a6ff7c0136620.bundle.js:1)@ main.0c80be8a6ff7c0136620.bundle.js:1
Solution

  • The JIT compiler is generally not available from AoT mode, here is a workaround taken from Angular's integration example.

    import {Compiler, COMPILER_OPTIONS, CompilerFactory, NgModule} from '@angular/core';
import {JitCompilerFactory} from '@angular/platform-browser-dynamic';

@NgModule({
  providers: [
    {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
    {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
    {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}
  ]
})

    There is also an open feature request to include jit compiler in AoT mode.