ng-cli-ext

Exposes webpack config at runtime from @angular/cli just before it runs.

Usage no npm install needed!

<script type="module">
  import ngCliExt from 'https://cdn.skypack.dev/ng-cli-ext';
</script>

README

Edit / Replace webpack config using angular cli.

Install

npm install ng-cli-ext --save-dev

yarn ng-cli-ext -D

Usage

From version 1 ng-cli-ext is an almost identical copy of the library ngx-build-plus with 2 changes:

  • You can use typescript files for webpack config files (make sure the pacakge ts-node is instaleld)

    • You can can import alias names defined in your tsconfig.json (make sure the package tsconfig-paths is instaleld)

  • You can provide a function intsead of a configuration object. (read more below)

Setting up ng-cli-ext is identical to how ngx-build-plus is setup except how the configuration file is structured, please visit ngx-build-plus for more infomration on how to set it up in angular.json.

Configuration file

ngx-build-plus excepts a webpack configuration object which it merges into the original configuration produces by the cli.

ng-cli-ext allow's you to provide a function instead of an object. The function accepts a single parameter, the original configuration object generated by the angular cli. The function can modify the object or return a new object that will be used as the configuration object sent to webpack.

module.exports = function(webpackConfig) {
    // modify webpackConfig
    return webpackConfig;
}

Providing a configuration file works in ng-cli-ext as well, but if you use it like that you better of use the original package, ngx-build-plus..

TS support

Out of the box, using a typescript file as your webpack configuration will not work.

This is due to the source loading the configuration, in this case the angular cli. The cli does not expect someone to load any TS file outside of the client build so there is not support.

Webpack does support such scenario, if you run a standalone webpack build it will work.

ng-cli-ext will try to load the ts-node package before loading the config file so if it exists loading *.ts will work.

TS support for paths

paths is where we define alias names for relative import paths.

// instead of:
import `../../../../mylib/index.ts`

// we can write:
import `mylib`;

If you're using nx to manage your repo (or using a mono-repo appraoch) this will come in handy.

ng-cli-ext will try to load the tsconfig-paths package before loading the config file so if any import reference's to an alias defined in the configuration will work!

Why

Using a function provides a high level of control over the configuration file.

Under the hood, ngx-build-plus is using webpack-merge to do the merging. webpack-merge has a lot of features and merging strategies which you can't use, with a function you can do the merging manually.

See https://github.com/survivejs/webpack-merge for ideas.

webpack-merge aside, sometimes you want to apply complex logic on the config that act's based on certain conditions, removing things, adding things etc.. this is not possible with merging.

Special thanks to the guys behind ngx-build-plus!!!

Previous versions (< )

All versions lower then 1.0.0 does not hook into the cli's schematics engine. This is why it was required to use a special command line to run them. From 1 and aboce this is removed and the integration is done through angular.json file