Angular 2 AOT (Ahead Of Time) offline compilation example with Webpack


This repository shows how to use the Angular 2 command line offline compiler ``ngc` with Webpack.
Additionally it shows an alternative to `ngc` with `@ngtools/webpack` plugin used in the Angular CLI.

The application consists of a basic component (`src/app/components/hello-world.component.ts`)
and a module (`src/app/modules/main.module.ts`).

When the application starts (`npm start`)
it generates the compiled files next to the modules and the components(`*.ngfactory.ts`).

There is a different entry point for the non compiled(`src/app/bootstrap.ts`)
and AOT compiled application(`src/app/bootstrap.aot.ts`).

The difference between the development and production version is minification with UglifyJS.
Both development and production builds create the AOT compiled files.

The application is bundled with Webpack from the bootstrap files and is available on `http://localhost:9000`.
You can change between the different builds with commenting/uncommenting entry files in `src/index.html`.

$3

There are two modes for the application.

Using the command line tool `ngc` for compilation is the default one
and can be started with `npm start`. It bundles once and watches for file changes with `chokidar`
and re-runs the compilation on change.

The second one is using the `@ngtools/webpack` loader plugin for compilation
and can be started with `npm run start-plugin`. It uses `webpack-dev-server` and
live reloads on every file change.

$3

- AOT related issues
- AOT Webpack plugin related issues
- Unmet dependencies when `npm install`: delete the `node_modules`` directory and do a clean install.

$3

- Ahead-of-Time Compilation - official
- Ahead-of-Time Compilation in Angular 2
- Building an Angular 2 Application for Production
- Demystifying Ahead-Of-Time Compilation In Angular 2

$3

- Angular CLI
- Angular 2 Seed
- Angular 2 Universal Starter