@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 Ahead-of-Time Webpack Plugin

Webpack plugin that AoT compiles your Angular components and modules.

Usage

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

import {AotPlugin} from '@ngtools/webpack'

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

  plugins: [
    new AotPlugin({
      tsConfigPath: 'path/to/tsconfig.json',
      entryModule: 'path/to/app.module#AppModule'
    })
  ]
}

The loader works with the webpack plugin to compile your TypeScript. It's important to include both, and to not include any other TypeScript compiler loader.

Options

• tsConfigPath. The path to the tsconfig.json file. This is required. In your tsconfig.json, you can pass options to the Angular Compiler with angularCompilerOptions.
• basePath. Optional. The root to use by the compiler to resolve file paths. By default, use the tsConfigPath root.
• entryModule. Optional if specified in angularCompilerOptions. The path and classname of the main application module. This follows the format path/to/file#ClassName.
• mainPath. Optional if entryModule is specified. The main.ts file containing the bootstrap code. The plugin will use AST to determine the entryModule.
• genDir. Optional. The output directory of the offline compiler. The files created by the offline compiler will be in a virtual file system, but the import paths might change. This can also be specified in angularCompilerOptions, and by default will be the same as basePath.
• typeChecking. Optional, defaults to true. Enable type checking through your application. This will slow down compilation, but show syntactic and semantic errors in webpack.