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.
Permalink
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
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package.json travis (#44) Oct 25, 2018
tsconfig.json typo fix Oct 12, 2018
tslint.json

README.md

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

Installation

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

Usage:

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.

Example

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) {
    config.plugins.push(
      new PurifyCSSPlugin({
        paths: glob.sync(path.join(__dirname, '**/*.html'))
      })
    );
    return config;
}

Debugging

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.