Skip to content
Webpack configuration modifier for @angular/cli
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin windows execution fix Jul 16, 2018
lib fix typo Oct 25, 2018
static update default ngw.config Oct 25, 2018
package.json travis (#44) Oct 25, 2018
tsconfig.json typo fix Oct 12, 2018

Angular CLI Webpack (ngw)

This package provides an opportunity to modify @angular/cli project's webpack configuration without "ejecting".

Build Status npm version dependencies Status Coverage Status Coverage Status


For angular 6/7:

$ npx -p @angular/cli ng new my-project && cd my-project # create new Angular CLI project
$ npm i -D ngw # installing an improved cli-eject
$ ./node_modules/.bin/ngw --set-up # run via terminal in project root
Set up went successfully!

For angular 5 use npm i -D ngw@angular5


Last command installation (ngw --set-up) makes three things:

  1. Changes scripts in package.json that starts from ng to ngw
  2. Creates file ngw.config.ts in project root where you can redefine webpack.Configuration used by @angular/cli
  3. Sets compilerOptions.module = "commonjs" property in tsconfig.json

So just make changes to the webpack config in appeared ngw.config.ts

You may like to do npm i -D @types/webpack for better experience.


Removes unused selectors from your CSS

This little piece of code in your ngw.config removes unused selectors from your CSS:

const PurifyCSSPlugin = require('purifycss-webpack');
const path = require('path');
const glob = require('glob');

export default function(config) {
      new PurifyCSSPlugin({
        paths: glob.sync(path.join(__dirname, '**/*.html'))
    return config;


You may like to debug your configuration. This can be done with ndb package.

  1. Make sure that your development environment meets the requirements of ndb
  2. npm i -g ndb
  3. Add debugger keyword in ngw.config.ts
  4. ndb npm run start

Prod and dev mode modifications (ngw.config.ts)

const isProduction = process.argv.indexOf('--prod') !== -1;

export default function(config, options) {
  //common config modification
  config = isProduction
    ? productionModificationsMerged(config)
    : devModificationsMerged(config);
You can’t perform that action at this time.