Home

Awesome

Snapshot build of @ngtools/webpack

This repository is a snapshot of a commit on the original repository. The original code used to generate this is located at http://github.com/angular/angular-cli.

We do not accept PRs or Issues opened on this repository. You should not use this over a tested and released version of this package.

To test this snapshot in your own project, use

npm install git+https://github.com/angular/ngtools-webpack-builds.git

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://angular.dev/tools/libraries/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli

Usage

In your webpack config, add the following plugin and loader.

import { AngularWebpackPlugin } from '@ngtools/webpack';

exports = {
  /* ... */
  module: {
    rules: [
      /* ... */
      {
        test: /\.[jt]sx?$/,
        loader: '@ngtools/webpack',
      },
    ],
  },

  plugins: [
    new AngularWebpackPlugin({
      tsconfig: 'path/to/tsconfig.json',
      // ... other options as needed
    }),
  ],
};

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.

Options

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

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],
          },
        },
      },
    ],
  },
};