When executing application developed for any framwork ,application needs to be compiled before it can run.This compilation
happens when the application is executed(JIT) or it can happen before the execution of the application(AOT).
JIT or Just in time compilation happens when the angular application is loaded in the browser.This results in relatively
slow application since application needs to be compiled before it can be rendered in the browser.JIT compiler performs
this compilation.
In contrast AOT or Ahead of time compilation is performed by the AOT compiler in advance and not at run time.This results
in application which loads quickly since the extra compilation step is not performed at run time.Another advantage is that
in AOT runtime errors are reduced since you are not doing the compilation at runtime.So you can reduce run time erros.
Another advantage of AOT compilation is that download size of the application is reduced.Since the Angular compiler is almost half the size of the entire application ,in AOT compiler does not needs to be downloaded on the browser.
To perform AOT in your application you need to follow the below steps:
1.To perform ahead of time compilation you need to use the ngc compiler.You can get this compiler from the @angular/compiler-cli npm package.
Once you download this package you need to configure the tsconfig.json for AOT compilation.Specifically you need to add the following angularCompilerOptions section:
"angularCompilerOptions": { "genDir": "directoryName", "skipMetadataEmit" : true }
directoryName is the name of the directory which stores the compiled output files.
2.Once you get the ngc compiler and add the above section in the config file you can AOT compile the application using the ngc compiler and providing the config file:
node_modules/.bin/ngc" -p tsconfig.json
The above process create the factory files in the mentioned folder.
3.Now instead of bootstrapping the AppModule you bootstrap the corresponding factory AppModuleNgFactory
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
Leave a Reply