Angular Ahead-of-Time Webpack Plugin
Webpack 4.0 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
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 the
tsconfig.jsonfile. This is required. In your
tsconfig.json, you can pass options to the Angular Compiler with
basePath. Optional. The root to use by the compiler to resolve file paths. By default, use the
entryModule. Optional if specified in
angularCompilerOptions. The path and class name of the main application module. This follows the format
mainPath. Optional if
entryModuleis specified. The
main.tsfile containing the bootstrap code. The plugin will use AST to determine the
skipCodeGeneration. Optional, defaults to
false. Disable code generation and do not refactor the code to bootstrap. This replaces
template: require("string")(and similar for styles) to allow for webpack to properly link the resources.
sourceMap. Optional. Include sourcemaps.
compilerOptions. Optional. Override options in
contextElementDependencyConstructor. Optional. Set to
require('webpack/lib/dependencies/ContextElementDependency')if you are having
No module factory available for dependency type: ContextElementDependencyerrors.
directTemplateLoading. Optional. It causes the plugin to load component templates (HTML) directly from the filesystem. This is more efficient if only using the
raw-loaderto load component templates. Do not enable this option if additional loaders are configured for component templates.
forkTypeChecker. Optional, defaults to
true. Run the TypeScript type checker in a forked process.
hostReplacementPaths. Optional. It allows replacing resources with other resources in the build.
platform. Optional, defaults to
0. Possible values are
0stands for browser and
logger. Optional. A custom logger that sends information to STDOUT and STDERR.
nameLazyFiles. Optional. If
truethen uses the
[request]placeholder to set dynamic chunk names.
missingTranslation. Optional and only used for View Engine compilations. defaults to
warning. Possible values are
ignore. Determines how to handle missing translations for i18n.
i18nInFile. Optional and only used for View Engine compilations. Localization file to use for i18n.
i18nInFormat. Optional and only used for View Engine compilations. The format of the localization file.
i18nOutFile. Optional and only used for View Engine compilations. The name of the file to write extractions to.
i18nOutFormat. Optional and only used for View Engine compilations. The format of the localization file where extractions will be written to.
locale. Optional and only used for View Engine compilations. Locale to use for i18n.
- Compiles Sass/Less into CSS
- TypeScript transpilation
- Asset optimization
- Virtual filesystem for assets
- For serving local assets and compile versions.
- Live-reload via websockets
- Code splitting
- Recognizing the use of
loadChildrenin 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.