README.md

ng-cli-hooks

Hooks for the angular-cli

This documentation is for version 8 only

Documentation for other versions could be found here:

• Version 7.x.x

Getting Started

Install the package:

npm install --save-dev ng-cli-hooks

Update your angular.json file:

{
  ...
  "projects": {
    "app": {
      ...
      "architect": {
        "build": {
          "builder": "ng-cli-hooks:browser",
          "options": {
            "optionsHook": "hooks/options.js",
            "webpackHook": "hooks/webpack.js",
            ...

This Plugin contains hookable builders for

• browser
• dev-server
• server

Hooks

Currently this plugin contains three different hooks: optionsHook, webpackHook and indexHtmlHook.

optionsHook

This hook modifies the options for the builder at build-time.

Example: hooks/options.js

module.exports = function(options) {
  options.assets = options.assets.map(asset => {
    if(asset.input === 'src/assets') {
      asset.input = `branding/${process.env.APP_BRANDING}/assets`;
    }
    return asset;
  });
  return options;
}

indexHtmlHook

This hook modifies the generated index.html at build-time. It is only available for the builders browser and dev-server.

Example: hooks/index-html.js

module.exports = function(content, options) {
    content = content.replace('Ionic App', 'Example App');
    return content;
}

webpackHook

This hook can be used to modify the generated webpack-config of angular-cli or to replace it.

Modify the generated webpack-config

Example: hooks/webpack.js

const StringReplacePlugin = require('string-replace-webpack-plugin');
const {AngularCompilerPlugin} = require('@ngtools/webpack/src/angular_compiler_plugin');

function replaceAngularCompilerPlugin(plugins) {
  const index = plugins.findIndex(p => p instanceof AngularCompilerPlugin);
  const options = plugins[index]._options;
  options.directTemplateLoading = false;
  plugins[index] = new AngularCompilerPlugin(options);
}

module.exports = function (generatedWebpackConfig, options) {
  generatedWebpackConfig.module.rules.push({
    test: /\.html$/,
    loader: StringReplacePlugin.replace({
      replacements: [
        {
          pattern: /Hello World/ig,
          replacement: function () {
            return 'Hello Angular'
          }
        }
      ]
    })
  });

  /**
   * The webpack-config of Angular 8 does not have a loader for html.
   * It uses directTemplateloading. To modify the html content we have
   * to replace the AngularComplilerPlugin with directTemplateLoading
   * set to false.
  */
  generatedWebpackConfig.module.rules.unshift({
    test: /\.html$/,
    loader: 'raw-loader'
  });

  replaceAngularCompilerPlugin(generatedWebpackConfig.plugins);

  return generatedWebpackConfig;
}

Replace the generated webpack-config

If hooks/webpack.js exports a webpack-config-object, than the generated webpack-config will be replaced by your own.

Ionic 4

Since version 8.0.0 you don´t need the ng-cli-hooks:cordova-build builder anymore because ionic uses the builder you specified at architect.build or architect.serve.

Changelog

8.0.0

• Support for Angular 8
• Removed builders for extract-i18n and cordova-build
• Added indexHtmlHook to hook into the index.html build.

7.0.0

• Major version of ng-cli-hooks now equals the Angular version (use [email protected] to work with Angular 7.x.x)

1.1.0

• added ng-cli-hooks:cordova-build for Ionic 4 projects.