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.)