mirror of
https://github.com/angular/angular-cli.git
synced 2025-05-19 04:26:01 +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:
parent
d3074b6ace
commit
f5959364fc
@ -1,6 +1,9 @@
|
|||||||
# Angular Compiler Webpack Plugin
|
# Angular Compiler Webpack Plugin
|
||||||
|
|
||||||
Webpack 5.x plugin for the Angular Ahead-of-Time compiler. The plugin also supports Angular JIT mode.
|
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
|
## Usage
|
||||||
|
|
||||||
@ -13,6 +16,7 @@ exports = {
|
|||||||
/* ... */
|
/* ... */
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
|
/* ... */
|
||||||
{
|
{
|
||||||
test: /\.[jt]sx?$/,
|
test: /\.[jt]sx?$/,
|
||||||
loader: '@ngtools/webpack',
|
loader: '@ngtools/webpack',
|
||||||
@ -23,6 +27,7 @@ exports = {
|
|||||||
plugins: [
|
plugins: [
|
||||||
new AngularWebpackPlugin({
|
new AngularWebpackPlugin({
|
||||||
tsconfig: 'path/to/tsconfig.json',
|
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.
|
- `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.
|
- `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.
|
- `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],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
Loading…
x
Reference in New Issue
Block a user