Maximus Maximus - 25 days ago 8
Javascript Question

How does angular define whether aot compiler should be used

This page about modules states that there are two approaches to bootstrapping - dynamic and static. They are configured only in

main.ts
:

// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);


versus static (aot compiler):

// The browser platform without a compiler
import { platformBrowser } from '@angular/platform-browser';

// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app.module.ngfactory';

// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);


My question is how does angular know that aot compiler should be used? There seem to be no option to indicate that. I doubt that it parses
main.ts
and checks whether I used
@angular/platform-browser'
or
@angular/platform-browser-dynamic'
.

Answer

You're not just importing a different module: the whole set-up is different.

In the dynamic scenario, your AppModule is loaded through the platformBrowserDynamic loader. This object knows how to JIT-compile the rest of the modules in your application.

In the static scenario, you instead provide an AppModuleNgFactory to the platformBrowser loader. This other object knows where to find the AOT-compiled files of the application.

Think about it this way: angular cannot decide on the spot whether to use the AOT compiler or not, because that wouldn't be ahead of time! What it does decide is whether to search for existing compiled files, or to generate them locally. The precompiled files already exist: it's only a matter of going after them or not.

As for deciding whether to compile the files AOT, note that the Typescript compiler configuration (stored in tsconfig.json) is also different. The angularCompilerOptions section enables AOT compilation.

Documentation: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html