ngc-webpack

4.1.2 verified Sat Apr 25 auth: no javascript maintenance

A wrapper around @ngtools/webpack that adds hooks into the Angular AOT compilation process and supports library mode compilation for Angular libraries, enabling resource inlining (SCSS, LESS) and webpack loader chains. Current version 4.1.2 targets Angular 5 and requires @angular/compiler-cli ^5.0.0 and @ngtools/webpack ^1.8.0. The key differentiator from @ngtools/webpack is its library mode for publishing Angular packages, its extensible hook system, and the ability to use a custom TypeScript loader for JIT mode. It is now in maintenance mode; users are generally advised to use @ngtools/webpack directly for application builds unless library compilation is needed. Release cadence is low; last release was 2018.

Common errors

error Error: Cannot find module '@angular/compiler-cli' ↓

cause Missing peer dependency @angular/compiler-cli.

fix

Run npm install @angular/compiler-cli@^5.0.0

error Error: The Angular Compiler requires TypeScript >=2.1 and <2.5. ↓

cause TypeScript version incompatible with Angular 5 compiler.

fix

Install TypeScript 2.4.x with npm install typescript@2.4

error TypeError: NgcWebpackPlugin is not a constructor ↓

cause Incorrect import style (default vs named).

fix

Use import { NgcWebpackPlugin } from 'ngc-webpack'; or const { NgcWebpackPlugin } = require('ngc-webpack');

Warnings

breaking Version 4.0.0 removed support for custom TypeScript loaders like ts-loader and awesome-typescript-loader. ↓

fix Use @ngtools/webpack loader exclusively.

deprecated Library mode is considered experimental and may not work with newer Angular versions. ↓

fix Consider using Angular CLI's library generation or ng-packagr.

gotcha ngc-webpack does not support Angular Ivy; it is tied to the View Engine compiler. ↓

fix Do not use with Angular 9+; use @ngtools/webpack with Ivy at your own risk.

Install

npm install ngc-webpack

yarn add ngc-webpack

pnpm add ngc-webpack

Imports

NgcWebpackPlugin

wrong

const NgcWebpackPlugin = require('ngc-webpack').NgcWebpackPlugin

correct

import { NgcWebpackPlugin } from 'ngc-webpack'

CommonJS works but TypeScript types expect named import.

NgcWebpackPluginOptions

wrong

const NgcWebpackPluginOptions = require('ngc-webpack').NgcWebpackPluginOptions

correct

import { NgcWebpackPluginOptions } from 'ngc-webpack'

Mainly used for TypeScript type checking.

NgcWebpackLoader
```
import { NgcWebpackLoader } from 'ngc-webpack'
```
Used to configure webpack rules with the Angular AOT loader.

Quickstart

Basic webpack configuration using NgcWebpackPlugin as a replacement for @ngtools/webpack AngularWebpackPlugin.

// webpack.config.js
const { NgcWebpackPlugin } = require('ngc-webpack');

module.exports = {
  entry: './src/main.ts',
  module: {
    rules: [
      {
        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
        use: [
          { loader: '@ngtools/webpack' }
        ]
      }
    ]
  },
  plugins: [
    new NgcWebpackPlugin({
      tsConfigPath: './tsconfig.json',
      mainPath: './src/main.ts'
    })
  ]
};