How do I add a custom build step to Angular CLI?

Question

There doesn't seem to be a way to tie into whatever tooling that Angular CLI is using under the hood in order to build / serve a website.

I'm wanting to run my own image optimization script and can't find a way to run a script and a given point in time or add my code to the default build script.

Is there a way recommended / canonical way to do this?

Answer 1

As of today, Angular CLI does not support "pre" and "post" build events natively. However you could use one of other two options:

1. "pre/post" NPM scripts (more details: https://docs.npmjs.com/cli/v6/using-npm/scripts#pre--post-scripts)

{
  "prebuild": "additional calls",
  "build": "ng build"
}

2. Switching to Nx tools (https://nx.dev/getting-started/intro) that have more support for build pipelines, especially "dependsOn" attribute to allow chaining the steps

Example: https://nx.dev/core-features/run-tasks#defining-the-task-pipeline