2

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');
})();
Salvatore
  • 10,815
  • 4
  • 31
  • 69
Brian Var
  • 6,029
  • 25
  • 114
  • 212
  • what are you trying to do bigger picture? – Pace Oct 10 '19 at 05:19
  • Another Angular app is requesting the build files from this app at runtime. So I'm trying to pretty much `ng build && node build-elements.js` automatically as the developer saves their work. Does that make sense? – Brian Var Oct 10 '19 at 05:33
  • So really I'd like to be able to do the following `ng build --watch && node build-components.js` but it seems like you said above ng build does not complete when run in watch? – Brian Var Oct 10 '19 at 05:49
  • 1
    Hmm, you can tweak `angular.json` to create a configuration with a different output folder (or change the default output folder). I don't see anything built in to concat the files. You can possibly use [ngx-build-plus](https://github.com/manfredsteyer/ngx-build-plus) to do that but I don't know for certain. [This question](https://stackoverflow.com/questions/42933220/how-to-get-one-file-as-output-of-angular-cli) seemed to suggest that would be possible. – Pace Oct 10 '19 at 16:14

1 Answers1

3

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.

Pace
  • 41,875
  • 13
  • 113
  • 156
  • 1
    Yeah I see `ngx-build-plus` does have a reference app here to demonstrate single bundle build. Looks to be half the build time of `ng-build` – Brian Var Oct 13 '19 at 09:41
  • Kind of hacked this by using the npm package `watch` to run a build with `ngx build plus` build on every source file change. It is a couple of seconds quicker than plain old `ng build` as I'm outputting a single bundle. But no way as quick as an `ng serve` which I understand is because `ng serve` doesn't output the bundle to disk instead it stores the bundle in memory? @Pace – Brian Var Oct 16 '19 at 04:39
  • @BrianJ `ng serve` is an incremental build. The first build should be about the same speed as `ng build` but subsequent changes do not require a full recompile. Yes, this is achieved by holding not just the bundle but the build context in memory already parsed and tokenized. Is there any way you can still use `ngx build plus` and pass in the `--watch` flag? – Pace Oct 16 '19 at 07:03
  • Nope running with `--watch` flag behaves same way to default `ng build` it doesn't exit. So the second script doesn't run. For example `ng-build --watch && node build-components.js` – Brian Var Oct 16 '19 at 23:46