Webpack plugin that AoT compiles your Angular components and modules.
In your webpack config, add the following plugin and loader.
Angular version 5 and up, use AngularCompilerPlugin
:
import {AngularCompilerPlugin} from '@ngtools/webpack'
exports = { /* ... */
module: {
rules: [
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loader: '@ngtools/webpack'
}
]
},
plugins: [
new AngularCompilerPlugin({
tsConfigPath: 'path/to/tsconfig.json',
entryModule: 'path/to/app.module#AppModule',
sourceMap: true
})
]
}
Angular version 2 and 4, use AotPlugin
:
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',
sourceMap: true
})
]
}
The loader works with webpack plugin to compile your TypeScript. It's important to include both, and to not include any other TypeScript compiler loader.
tsConfigPath
. The path to thetsconfig.json
file. This is required. In yourtsconfig.json
, you can pass options to the Angular Compiler withangularCompilerOptions
.basePath
. Optional. The root to use by the compiler to resolve file paths. By default, use thetsConfigPath
root.entryModule
. Optional if specified inangularCompilerOptions
. The path and classname of the main application module. This follows the formatpath/to/file#ClassName
.mainPath
. Optional ifentryModule
is specified. Themain.ts
file containing the bootstrap code. The plugin will use AST to determine theentryModule
.skipCodeGeneration
. Optional, defaults to false. Disable code generation and do not refactor the code to bootstrap. This replacestemplateUrl: "string"
withtemplate: require("string")
(and similar for styles) to allow for webpack to properly link the resources.typeChecking
. Optional, defaults to true. Enable type checking through your application. This will slow down compilation, but show syntactic and semantic errors in webpack. Only available inAotPlugin
.exclude
. Optional. Extra files to exclude from TypeScript compilation. Not supported withAngularCompilerPlugin
.sourceMap
. Optional. Include sourcemaps.compilerOptions
. Optional. Override options intsconfig.json
.
The benefits and ability of using @ngtools/webpack
standalone from the Angular CLI as presented in Stephen Fluin's Angular CLI talk at Angular Connect 2016:
- Compiles SCSS/LESS
- TypeScript transpilation
- Bundles JavaScript, CSS
- Asset optimization
- Virtual filesystem for assets
- For serving local assets and compile versions.
- Live-reload via websockets
- Code splitting
- Recognizing the use of
loadChildren
in the router, and bundling those modules separately so that any dependencies of those modules are not going to be loaded as part of your main bundle. These separate bundles will be pulled out of the critical path of your application, making your total application bundle much smaller and loading it much more performant.