1
0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-18 20:02:40 +08:00

docs(@ngtools/webpack): add Ivy linker setup documentation to readme

When not using the Angular CLI, the Babel-based Ivy linker is also required to successfully build an application. A section describing the setup of the linker in addition to the Angular compiler plugin has now been included with links to the AIO documentation and the babel-loader for additional information.
This commit is contained in:
Charles Lyding 2021-11-03 11:53:37 -04:00 committed by Charles
parent d3074b6ace
commit f5959364fc

@ -1,6 +1,9 @@
# Angular Compiler Webpack Plugin
Webpack 5.x plugin for the Angular Ahead-of-Time compiler. The plugin also supports Angular JIT mode.
When this plugin is used outside of the Angular CLI, the Ivy linker will also be needed to support
the usage of Angular libraries. An example configuration of the Babel-based Ivy linker is provided
in the linker section. For additional information regarding the linker, please see: https://v13.angular.io/guide/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli
## Usage
@ -13,6 +16,7 @@ exports = {
/* ... */
module: {
rules: [
/* ... */
{
test: /\.[jt]sx?$/,
loader: '@ngtools/webpack',
@ -23,6 +27,7 @@ exports = {
plugins: [
new AngularWebpackPlugin({
tsconfig: 'path/to/tsconfig.json',
// ... other options as needed
}),
],
};
@ -38,3 +43,38 @@ The loader works with webpack plugin to compile the application's TypeScript. It
- `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.
- `fileReplacements` [default: none] - Allows replacing TypeScript files with other TypeScript files in the build. This option acts on fully resolved file paths.
- `inlineStyleFileExtension` [default: none] - When set inline component styles will be processed by Webpack as files with the provided extension.
## Ivy Linker
The Ivy linker can be setup by using the Webpack `babel-loader` package.
If not already installed, add the `babel-loader` package using your project's package manager.
Then in your webpack config, add the `babel-loader` with the following configuration.
If the `babel-loader` is already present in your configuration, the linker plugin can be added to
the existing loader configuration as well.
Enabling caching for the `babel-loader` is recommended to avoid reprocessing libraries on
every build.
For additional information regarding the `babel-loader` package, please see: https://github.com/babel/babel-loader/tree/main#readme
```typescript
import linkerPlugin from '@angular/compiler-cli/linker/babel';
exports = {
/* ... */
module: {
rules: [
/* ... */
{
test: /\.[cm]?js$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
compact: false,
plugins: [linkerPlugin],
},
},
},
],
},
};
```