This package provides an opportunity to modify @angular/cli project's webpack configuration without "ejecting".
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:
- Changes scripts in package.json that starts from
ngtongw - Creates file
ngw.config.tsin project root where you can redefinewebpack.Configurationused by@angular/cli - Sets
compilerOptions.module = "commonjs"property intsconfig.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.
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; }
You may like to debug your configuration. This can be done with ndb package.
- Make sure that your development environment meets the requirements of
ndb npm i -g ndb- Add
debuggerkeyword inngw.config.ts ndb npm run start
const isProduction = process.argv.indexOf('--prod') !== -1; export default function(config, options) { //common config modification ... config = isProduction ? productionModificationsMerged(config) : devModificationsMerged(config); } ... }