40

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

app\main.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?

Zze
  • 18,229
  • 13
  • 85
  • 118
Toan Nguyen
  • 11,263
  • 5
  • 43
  • 59
  • For a barebones solution github.com/blacksonic/angular2-aot-webpack , and an alternative with Webpack plugins (no need to modify entry point) github.com/blacksonic/angular2-aot-cli-webpack-plugin (internally uses plugin og Angular CLI) – VuesomeDev Mar 10 '17 at 08:34

2 Answers2

46

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.

Sanket
  • 19,295
  • 10
  • 71
  • 82
  • 1
    Do you know how to install ngc? It seems that -p is used with typescript config file rather than source code folder? – Toan Nguyen Aug 13 '16 at 21:57
  • @ToanNguyen Check my EDIT answer. For more details, refer Install and Use section on this link - https://github.com/angular/angular/tree/master/modules/%40angular/compiler-cli – Sanket Aug 14 '16 at 05:02
  • When I run ngc, it does not generate .ngfactory files, instead it only generates .metadata.json files. – Rick Love Aug 16 '16 at 14:22
  • 6
    I found this: https://github.com/angular/angular/issues/10792. Many users are reporting that ngc does not work on Windows. – Rick Love Aug 16 '16 at 14:41
  • @Sanket can you please also update the answer with instructions for those who are not using @angular/compiler-cli but are building apps manually (e.g. people using ASP.Net and manually creating components, ngModules routes etc.) – Naveed Ahmed Aug 26 '16 at 22:19
  • 7
    @Sanket the order of events in your answer is unclear to me. Do you modify `main.ts` before you run `ngc`? If so you get errors about a non existent `MyAppModuleNgFactory`. On the other hand, do you modify `main.ts` after you run `ngc`? If so, the Javascript files will not reflect the new `main.ts`. I'm stuck in a circular reference logic – BeetleJuice Sep 07 '16 at 19:21
  • I am also getting the error `Cannot find module './app.ngfactory'` after following those steps. – trickpatty Sep 09 '16 at 17:14
  • @Sanket as of today, probably it is good to also refer to original project [here](https://github.com/blacksonic/angular2-aot-webpack) – superjos Sep 30 '16 at 14:15
  • @ngtools/webpack with Angular5 no longer requires a different main.ts AOT, you can use the same main.ts for both JIT and AOT – Brian Ogden Jul 20 '18 at 23:56
28

2017 UPDATE

As of Janurary 2017 If using angular-cli, AOT compiling is now the default compilation method when running the following command ng build --prod with no code change requirements.

If you want to disable AOT and instead use JIT in production, then you can use ng build --prod --no-aot.

Source: https://github.com/angular/angular-cli/issues/4138

This means that you can still use JIT compiling whilst developing (will compile faster so pretty handy) with ng build and leave your .ts as something like this:

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

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

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

To Summarise: 
ng build                    // build with JIT
ng build --prod --no-aot    // build with JIT 
ng build --prod             // build with AOT
Zze
  • 18,229
  • 13
  • 85
  • 118
  • 3
    How do you configure that with Webpack? – Atieh Mar 14 '17 at 00:27
  • @Atieh What are you reffering to ? – Zze Jun 12 '17 at 22:29
  • @Zze Does this mean we dont have to use these steps mentioned in the angular docs https://angular.io/guide/aot-compiler#compile-with-aot to achieve aot? I couldnt find any clear statement about this. Could you point me to the details. Thanks in advance ! – Ashwini Maddala Jul 12 '17 at 09:07
  • 1
    @AshwiniMaddala I agree that this is slightly conflicting. You do *NOT* have to edit the `.tsconfig`. angular-cli handles this process for you. "AoT compilation is a good technique which is already integrated as part of the angular-seed and angular-cli" - http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/ – Zze Jul 13 '17 at 06:19