AoT Configuration

To enable AoT in Angular, there are two possible methods:

• using ngc directly
• using @ngtools/webpack

We recommend the second way because it fits the Angular + Webpack toolchain the best. One problem of using raw ngc is that ngc tries to inline CSS while lacking necessary context. For example, the @import 'basscss-basic' statement in index.css would cause an error like Error: Compilation failed. Resource file not found with ngc. It lacks the information that 'basscss-basic' is actually a node module inside node_modules. On the other hand, @ngtools/webpack provides AotPlugin and loader for Webpack which shares the context with other loaders/plugins. So when ngc is called by @ngtools/webpack, it can gather necessary informations from other plugins like postcss-import to correctly understand things like @import 'basscss-basic'.

Config @ngtools/webpack

First, get @ngtools/webpack from npm and save it as a development dependency:

npm install -D @ngtools/webpack

Then, inside the Webpack configuration file (usually named as webpack.config.js), add following code:

import {AotPlugin} from '@ngtools/webpack'

exports = { /* ... */
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: '@ngtools/webpack',
      }
    ]
  },

  plugins: [
    new AotPlugin({
      tsConfigPath: 'path/to/tsconfig.json',
      entryModule: 'path/to/app.module#AppModule'
    })
  ]
}

Here @ngtools/webpack replaces other typescript loader like ts-loader or awesome-typescript-loader. It works with AotPlugin together to enable AoT compilation. More details can be found here.

(Note, for project generated by angular-cli, turning on AoT can be simple as ng build --aot, but since angular-cli does not allow customized webpack configuration for complex use cases, it may be insufficient.)