Provides an opportunity to overload webpack config for angular-cli applications
npm install ngw> This package provides an opportunity to modify @angular/cli project's webpack configuration without "ejecting".
  
 
bash
$ 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 complierOptions.module = "commonjs" property in tsconfig.jsonSo just make changes to the webpack config in appeared
ngw.config.tsYou 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:
`typescript
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)
`typescriptconst isProduction = process.argv.indexOf('--prod') !== -1;
export default function(config, options) {
//common config modification
...
config = isProduction
? productionModificationsMerged(config)
: devModificationsChane(config);
}
...
}
``