Build process hook

Bug Report or Feature Request (mark with an x)

- [X] feature request

Command (mark with an x)

- [X] build

Desired functionality

It would be nice to have a hook in the build process, between the index generation and the hash computation, for execute something.

I try to use the Critical lib with my Angular project. First, I build my app, then I use Critical script in order to inline my CSS in the index file : I rewrite my index file. It was messed up with Angular SW, so I submit an issue in Angular’s Github (https://github.com/angular/angular/issues/25267).

@gkalpak explains that the issue result from the stored hash mismatch, because of the rewrite of index file.

[lacolaco]

Let me share my use-case. (copied from #16308)

In general, ng build is often aliased as npm run build. And for production build, often ng build --prod is aliased as a different command like npm run build:prod. Then my package.json becomes like below;

{
  "scripts": {
    "build": "ng build",
    "build:prod": "ng build --prod"
  }
}

In that case, for adding preprocess script, I have to add it into each scripts like this;

{
  "scripts": {
    "build": "npm run codegen && ng build",
    "build:prod": "npm run codegen && ng build --prod",
    "codegen": "..."
  }
}

I can use pre- hook of npm-scripts, however, a problem is there are two build scripts. It brings a lot of scripts in package.json.

{
  "scripts": {
    "prebuild": "npm run codegen",
    "build": "ng build",
    "prebuild:prod": "npm run prebuild",
    "build:prod": "ng build --prod",
    "codegen": "..."
  }
}

This problem can be more serious in a workspace having multiple projects. Each build commands have to take project identifier and often these are separated as different npm-scripts.

{
  "scripts": {
    "build:appA": "ng build appA",
    "build:appA:prod": "ng build appA --prod",
    "build:appB": "ng build appB",
    "build:appB:prod": "ng build appB --prod",
  }
}

Too many npm-scripts are hard to maintain. So I’d like to propose Angular CLI’s command hook feature.

So I’d like to propose CLI command hook as a solution.

CLI command hook is a mechanism to execute a script before/after running CLI’s command. It is not only for ng build but all command.

With the hook, pre-build code-generation is able to be configured in angular.json like below;

{
  "projects": {
    "appA": {
      "architect": {
        "build": {
          "hooks": {
            "pre": "npm run codegen"
          },
          "configurations": {
             "production": {
                "hooks": {
                   "pre": "npm run codegen:prod",
                 }
              }
           }
        }
      }
    }
  }
}

Once configuring this, it can work with --prod or any --configurations because each configuration can have its own hooks option to override. And any architect commands can be configured as well as build. Each architect author doesn’t have to know about that.

[alexanderbird]

This would be helpful.

My situation: I need to compile a TypeScript file and output the JavaScript to the top level in dist. I could do this with a separate build script in package.json, but that gets awkward when running the angular build in watch mode.

What I would like is a lifecycle hook from the angular.json that runs a shell command or a JavaScript file. Currently I would need it after the Angular build completes, but I would imagine for other people it would be helpful to have several lifecycle hooks.

I’m imagining something like:

  "buildHooks": {
    "afterBuild": [
      "npm run build-that-other-thing-and-copy-it-to-dist"
    ]
  }

It looks like there are other people facing this issue – this answer on this Stack Overflow question suggests starting another parallel process along with ng build --watch that watches for changes to dist and runs another command whenever dist changes.