Proposal: pre/post-commands for Angular CLI

[lacolaco]

🚀 Feature request

Command (mark with an x)

• All commands

Description

This idea is inspired by npm-scripts. I'd like to introduce a feature that allows us to define a prebuild script in angular.json.
That is useful and powerful for solving build process issues like this:

#4318

Currently, Angular CLI doesn't have hooks on its commands. To execute preprocessing scripts like code-generation before ng build, developers have to do it manually.

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.

Describe the solution you'd like

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.

Each hook script will be executed at the location of angular.json. The initial CWD is the workspace root.

[alan-agius4]

This overlaps with this feature request #11787

Maybe you can add the details there?

[alan-agius4]

Thanks @lacolaco