1 | # Angular Compiler Webpack Plugin
|
2 |
|
3 | Webpack 5.x plugin for the Angular Ahead-of-Time compiler. The plugin also supports Angular JIT mode.
|
4 |
|
5 | ## Usage
|
6 |
|
7 | In your webpack config, add the following plugin and loader.
|
8 |
|
9 | ```typescript
|
10 | import { AngularWebpackPlugin } from '@ngtools/webpack';
|
11 |
|
12 | exports = {
|
13 | /* ... */
|
14 | module: {
|
15 | rules: [
|
16 | {
|
17 | test: /\.[jt]sx?$/,
|
18 | loader: '@ngtools/webpack',
|
19 | },
|
20 | ],
|
21 | },
|
22 |
|
23 | plugins: [
|
24 | new AngularWebpackPlugin({
|
25 | tsconfig: 'path/to/tsconfig.json',
|
26 | }),
|
27 | ],
|
28 | };
|
29 | ```
|
30 |
|
31 | The loader works with webpack plugin to compile the application's TypeScript. It is important to include both, and to not include any other TypeScript loader.
|
32 |
|
33 | ## Options
|
34 |
|
35 | - `tsconfig` [default: `tsconfig.json`] - The path to the application's TypeScript Configuration file. In the `tsconfig.json`, you can pass options to the Angular Compiler with `angularCompilerOptions`. Relative paths will be resolved from the Webpack compilation's context.
|
36 | - `compilerOptions` [default: none] - Overrides options in the application's TypeScript Configuration file (`tsconfig.json`).
|
37 | - `jitMode` [default: `false`] - Enables JIT compilation and do not refactor the code to bootstrap. This replaces `templateUrl: "string"` with `template: require("string")` (and similar for styles) to allow for webpack to properly link the resources.
|
38 | - `directTemplateLoading` [default: `true`] - Causes the plugin to load component templates (HTML) directly from the filesystem. This is more efficient if only using the `raw-loader` to load component templates. Do not enable this option if additional loaders are configured for component templates.
|
39 | - `fileReplacements` [default: none] - Allows replacing TypeScript files with other TypeScript files in the build. This option acts on fully resolved file paths.
|
40 | - `inlineStyleFileExtension` [default: none] - When set inline component styles will be processed by Webpack as files with the provided extension.
|