angularaotangular-compilerangular-dynamic-components

Angular: How to import JitCompilerFactory?

If I use AOT compilation dynamic compilation will not possible. So I need to load the compiler to a browser. So how do I load it? If I use 

import { JitCompilerFactory } from '@angular/compiler';

However, after importing the JitCompilerFactory I am getting the following error:

"export 'JitCompilerFactory' was not found in 'angular/compiler

So am I right that now I need to import it from 'angular/platform-browser-dynamic' for dynamic compilation?

Solution

  • You need to import JitCompilerFactory into your app.module.ts like this:

    import {Compiler, COMPILER_OPTIONS, CompilerFactory} from '@angular/core';
import {JitCompilerFactory} from '@angular/platform-browser-dynamic';
export function createCompiler(compilerFactory: CompilerFactory) {
  return compilerFactory.createCompiler();
}



@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
    {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
    {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

    Here I created a fully working StackBlitz Demo with a Dynamic Component if you want to play around with it on there.