@ngtools/webpack

What is @ngtools/webpack?

The @ngtools/webpack package is an Angular compiler plugin for Webpack. It allows developers to use the Angular compiler within a Webpack build process. This integration facilitates tasks such as Ahead-of-Time (AOT) compilation, lazy loading, and other Angular-specific optimizations directly within a Webpack workflow.

What are @ngtools/webpack's main functionalities?

Ahead-of-Time (AOT) Compilation

This feature enables the Angular compiler to compile the application components ahead of time, converting Angular HTML and TypeScript code into efficient JavaScript code during the build process. This reduces the runtime processing by pre-compiling templates and components.

const { AngularCompilerPlugin } = require('@ngtools/webpack');

module.exports = {
  entry: './src/main.ts',
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: '@ngtools/webpack'
      }
    ]
  },
  plugins: [
    new AngularCompilerPlugin({
      tsConfigPath: './tsconfig.json',
      entryModule: './src/app/app.module#AppModule',
      sourceMap: true
    })
  ]
};

Lazy Loading

Lazy loading is a technique to initialize components or modules only when they are needed, which can significantly reduce the initial load time of an application. The @ngtools/webpack package supports lazy loading by integrating with Angular's routing mechanism.

const { AngularCompilerPlugin } = require('@ngtools/webpack');

module.exports = {
  // Configuration options...
  plugins: [
    new AngularCompilerPlugin({
      // Plugin options...
      lazyModules: ['/path/to/lazy/module#ModuleName']
    })
  ]
};

Other packages similar to @ngtools/webpack

awesome-typescript-loader

Similar to @ngtools/webpack, awesome-typescript-loader is a loader for Webpack that allows you to transpile TypeScript into JavaScript. While it provides TypeScript compilation like @ngtools/webpack, it lacks the deep integration with Angular's compiler for features like AOT compilation and lazy loading.

angular-router-loader

This loader for Webpack enables lazy loading for Angular applications by allowing asynchronous loading of Angular modules through the router. It's similar to the lazy loading feature of @ngtools/webpack but is more focused and does not include other Angular-specific optimizations.

README

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

• 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.
• compilerOptions [default: none] - Overrides options in the application's TypeScript Configuration file (tsconfig.json).
• 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.
• 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

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

Changelog

19.1.0 (2025-01-15)

Deprecations

@angular/build

• The baseHref option under i18n.locales and i18n.sourceLocale in angular.json is deprecated in favor of subPath.

  The subPath defines the URL segment for the locale, serving as both the HTML base HREF and the directory name for output. By default, if not specified, subPath will use the locale code.

@schematics/angular

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | --------------------------------------------------------------- | | 02825eec5 | feat | use @angular/build package in library generation schematic | | 88431b756 | fix | application migration should migrate ng-packagr builder package |

@angular-devkit/architect

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ---------------------------------------------------- | | 2b8a02bac | feat | require build schemas from modules | | fe1ae6933 | fix | avoid Node.js resolution for relative builder schema |

@angular-devkit/core

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ---------------------------------------------------------------- | | ce7c4e203 | fix | handle Windows drive letter case insensitivity in path functions |

@angular-devkit/schematics

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------- | | 2f55209dd | fix | update Rule type to support returning a Promise of Tree |

@angular/build

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------------ | | 2c9d7368f | feat | add ng-packagr builder to the package | | 0a570c0c2 | feat | add support for customizing URL segments with i18n | | 298b554a7 | feat | enable component template hot replacement by default | | d350f357b | fix | correctly validate locales subPath | | 8aa1ce608 | fix | handle loaders correctly in SSR bundles for external packages | | 3b7e6a8c6 | fix | invalidate component template updates with dev-server SSR | | 8fa682e57 | fix | remove deleted assets from output during watch mode | | 48cae815c | fix | skip vite SSR warmup file configuration when SSR is disabled | | ba16ad6b5 | fix | support incremental build file results in watch mode | | 955acef3d | fix | trigger browser reload on asset changes with Vite dev server | | e74300a2c | fix | use component updates for component style HMR | | 6a19c217e | fix | warn when using both isolatedModules and emitDecoratorMetadata |

@angular/ssr

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | --------------------------------------------------------------------------------- | | 8d7a51dfc | feat | add modulepreload for lazy-loaded routes | | 41ece633b | feat | redirect to preferred locale when accessing root route without a specified locale | | 3feecddbb | fix | disable component boostrapping when running route extraction | | 6edb90883 | fix | throw error when using route matchers |

<!-- CHANGELOG SPLIT MARKER -->

<a name="19.0.7"></a>