Search code examples
javascriptangulartypescriptnpm-scriptsconcurrently

How to chain npm script call after each ng serve build?


I'm trying to chain the ng serve script call while running but when I've ran this command the second chained script build-components.js runs only on first call.
I thought concurrently package here would allow both scripts to run in sequence according to docs https://www.npmjs.com/package/concurrently

What I'm aiming to do is run the build-components.js script every time ng serve runs (i.e, detects a source change).

Package.json script:

"build:watch": "concurrently \"ng serve --port 4003\" \"node build-components.js\""

Testing

 concurrently "ng serve --port 4003" "node build-components.js"

[1] node build-components.js exited with code 0
[0] i 「wds」: Project is running at http://localhost:4003/webpack-dev-server/

Question:

How can you run another npm script after each ng serve build?

I've also had a look at the npm post hooks but this doesn't seem to run the script after ng serve has ran either.

http://www.marcusoft.net/2015/08/pre-and-post-hooks-for-npm-scripting.html#hooks-pre-and-post

This is the build-components.js script for reference. It copies some extra build files to a public folder for hosting:

const fs = require('fs-extra');
const concat = require('concat');

(async function build() {
  const js = [
    './dist/app/runtime-es2015.js',
    './dist/app/main-es2015.js',
    './dist/app/scripts.js',
  ];
  const css = ['./dist/app/styles.css'];

  await fs.ensureDir('components');
  await concat(js, 'components/component.js');
  await concat(css, 'components/component.css');
})();

Solution

  • This is not possible. ng serve does not complete when run in watch mode so chaining items to run after it will have no effect. The serve command has no hooks for this.