@splice/angular-cli-wrapper

Angular CLI Wrapper

Wraps Angular CLI in a loving stranglehold, and forces your Webpack config down its throat.

Installation

Install the package:

$ yarn add --dev @splice/angular-cli-wrapper

Initialize- this will create a default webpack-config.js file in your project root:

$ yarn run splice-ng init

Modify any scripts in your package.json that reference ng (eg. ng serve, ng build) with splice-ng (eg splice-ng serve, splice-ng build). [TODO: This step will one day part of init]

Usage

Angular CLI Wrapper lets you use on-disk paths in the src attribute of img tags (and any other attributes of other tags that you configure in webpack-config.js). This means that references to images will be fingerprinted, and they'll respect the deployUrl setting instead of being relative to /.

Since the entire Webpack config is now available, you can feel free to modify it as needed for your particular application. Do be careful though- you don't want to do anything too crazy and run the risk of causing problems with Angular CLI.

How it works

Angular CLI Wrapper uses some Node Magic™ to hook into the module loading process and intercept the Angular CLI code responsible for loading Webpack configs. After the default config loading code runs, the entire configuration, along with the project's current build settings, are passed off to code in your application, providing you the opportunity to modify the Webpack config before the project is built.

The splice-ng init command generates a default webpack-config.js file that contains one function, taking the existing config and build options, and returning a new config:

const merge = require('webpack-merge');

module.exports = function (originalConfig, buildOptions) {
  let newConfig = merge.smart(originalConfig, {
    module: {
      rules: [
        { test: /\.html$/, loader: 'html-loader?-minimize&interpolate&attrs=img:src video:poster source:src' }
      ]
    }
  });

  return newConfig;
}

The webpack-merge package is used which allows easy merging of Webpack configs without having to worry about unintentonally overwriting existing rules and settings.