typescript - Angular 2 / 4 / 5 - Ahead-of-time compilation how to

Question

I'm trying to bootstrap my Angular 2 RC5 application following this guide https://angular.io/docs/ts/latest/guide/ngmodule.html Below is my code

import { AppModuleNgFactory } from './app.module.ngfactory';
import {platformBrowser} from "@angular/platform-browser";

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

However , when I tried to compile typescript code, I got the following error

appmain.ts(1,36): error TS2307: Cannot find module './app.module.ngfactory'.

How can I generate the app.module.ngfactory file? Which tool should I use?

Answer 1

Both the JIT and AOT compilers generate an AppModuleNgFactory class from the same AppModule source code.

The JIT compiler creates that factory class on the fly, in memory, in the browser. The AOT compiler outputs the factory to a physical file that we're importing here in the static version of main.ts

At a high level, @angular/compiler-cli provides a wrapper around Typescript’s tsc compiler, and both AoT compiles your application’s code, and then transpiles your application’s Typescript to Javascript:

$ ngc -p src

This generates a new file for each component and module ( called an NgFactory )

To run your app in AoT mode, all that’s required is changing your main.ts file from

import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’
import {MyAppModule} from ‘./app’
platformBrowserDynamic().bootstrapModule(MyAppModule);

to

import {platformBrowser} from ‘@angular/platform-browser’
import {MyAppModuleNgFactory} from ‘./app.ngfactory’ //generated code
platformBrowser().bootstrapModuleFactory(MyAppModuleNgFactory);

---

EDIT:

To use ngc command, first install these-

$ npm install @angular/compiler-cli typescript@next @angular/platform-server @angular/compiler

ngc is a drop-in replacement for tsc which you will find it in- ./node_modules/.bin/ngc folder.