Ng-cli-hooks NPM

ng-cli-hooks

Hooks for the angular-cli

Unfortunately I don't have much time to take care of this project, so please contribute when new versions of Angular are released. As an alternative to this package, I recommend taking a look at the angular-builders repo. They are much faster when new Angular versions are released.

This documentation is for version 16 only

Documentation for other versions could be found here:

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",
            "indexHtmlHook": "hooks/index-html.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) {
    if (process.env.APP_BRANDING) {
        var branding = process.env.APP_BRANDING.trim();
        if (options.assets) {
            options.assets = options.assets.map(asset => {
                if (asset.input === 'src/assets') {
                    asset.input = `src/branding/${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

During the development of this hook it may be necessary to clear the Angular cache.

Example: hooks/webpack.js

function replaceAngularCompilerPlugin(plugins) {
  const plugin = plugins.find(p => p.pluginOptions && p.pluginOptions.directTemplateLoading);
  const options = plugin.pluginOptions;
  options.directTemplateLoading = false;
}

module.exports = function (generatedWebpackConfig, options) {  
  generatedWebpackConfig.module.rules.unshift({
    test: /\.html$/,
    loader: 'string-replace-loader',
    options: {
        search: /Welcome/ig,
        replace: () => 'Welcome to ng-cli-hooks',
        flags: 'g'
    }
  });

  replaceAngularCompilerPlugin(generatedWebpackConfig.plugins);

  return generatedWebpackConfig;
}