How to use platformBrowser instead of platformBrowserDynamic with angular-cli app in maint.ts to bootstrap app in aot mode?

Question

I am building the app with angular cli with aot=true and --prod so the app gets compiled with aot and bundle sizes are smaller, but how do I bootstrap the app in aot mode so that the bootstrap is faster like explained in this article?

Current code:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (!environment.local) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Code proposed by article:

import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
//** where is the following file generated by angular-cli? **
import { AppModuleNgFactory } from './app/app.module.ngfactory';

if (!environment.local) {
  enableProdMode();
}

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Where do I find app.module.ngfactory? Is this even needed? Or using platformBrowserDynamic with aot with angular cli still somehow results in aot bootstrap instead of jit bootstrap?

Matthew Alltop · Answer 1 · 2022-09-21T17:37:59.270

This is a super old question but I stumbled on it while trying to solve something similar.

When the dynamic platform is used, this factory is created each time you load your application; however, now we are creating it before our application even runs. The AppModuleNgFactory is not going to exist until you build your application with ngc....

It is likely that ngc was installed with your angular application, so in order to run ngc, you’ll just have to run ./path/to/node_modules/.bin/ngc -p ./path/to/src in your project directory. If it’s not installed, you can install it with npm install @angular/compiler-cli typescript@next @angular/platform-server @angular/compiler.

Running ./node_modules/bin/ngc out of the root (where your project's tsconfig.ts exists) works to generate this file.

How to use platformBrowser instead of platformBrowserDynamic with angular-cli app in maint.ts to bootstrap app in aot mode?

1 Answers1