Run two Angular CLI tasks after each other, with --watch

Question

I have two tasks, that need to run after each other:

ng build <library-name> && ng serve

I want to have file change watching on the <libary-name>, so I add this:

ng build <library-name> --watch && ng serve

This is obviously not working, as the watch will never finish, so the ng serve will never get called.

ng build <library-name> --watch & ng serve

this solution is also not good, as the ng serve starts before the ng build finishes.

Is there any way, to capture the Compilation complete message from the first ng build, and then let file watcher run? Is there any way to just start the watcher maybe like this:

ng build <library-name> && --watch-the-libary-please & ng serve

?

Spandrel

You can only let them execute one after the other if you don't --watch the first one. The alternative is to simply execute the build commands in separate sessions. – Ocrea

Yeah, this is our workaround now, but I hope that there is a nicer solution. – Spandrel

Write a bash script to do that. You can even create custom service if this needs to be triggered periodically. – Hanschen

@Spandrel Could you look at my solution, does it work for you? It will rebuild and serve after any changes made to lib. So now you don't need --wach flag because script is guarding changes. Or maybe I've made it overcomplicated. Anyways I'd like know what you think. – Hanschen

Answer 1

You can use npm package concurrently, which allows running multiple commands in parallel.

Wineskin

Thanks, but this does not solve my problem: I need to start up the second process after the first build is finished. – Spandrel

you can run ng build && concurrently "ng build --watch" "ng serve". – Wineskin

Yeah, this solution works, however you can also do it without it: this is basically the same as ng build tariff-lib && (ng build tariff-lib --watch & ng serve) – Spandrel

Hmmm... this answer is "good enough", but doesn't actually do what the OP asked. This runs them concurrently (obv) not sequentially. – Astro

Answer 2

Okay, I might have found a solution for you. I have written simple Python script which will check whether directory (in this case your library) has been changed by calculating its sha1sum. If it's in fact changed then it will run your commands for ng build and ng serve

import time
import os
from checksumdir import dirhash

directory = '/YOUR/PATH/TO/LIBRARY'
initial_sha1 = dirhash(directory, 'sha1')

modified = False

while modified is False:
    current_sha1 = dirhash(directory, 'sha1')
    if initial_sha1 != current_sha1:
        print("Files has been hanged")
        os.system('ng build <libary-name>')
        os.system('ng serve')
        modified = True
    else:
        time.sleep(10)

If you want to run this indefinitely instead of changing flag modified to True change value of initials sha to current initial_sha1 = current_sha1 and kill program when you want.

You might need to install this package:

pip install checksumdir

This works under Python 2.7 and 3.X (You might need to install checksumdir with pip3 for that)

Edit

You might need to exec this script under a directory in which you build your app, or add before ng buld

os.system('cd /PATH/WHERE/YOU/BUILD')

Hanschen

thank you, but using python just for this is an overkill. Also, I belive that this script does re-run ng serve every time without stopping the previous one? – Spandrel

@Spandrel Yep it does not re-run ng serve, but this could be easily implemented. I just didn't think through at the beginning. – Hanschen

Answer 3

I had the same issue, and I could come out with a solution. So, leaving it here.

Having the following scripts, npm start will start both ng build my-lib and ng build serve in parallel, and whichever you make a change in my-app or my-lib, it will trigger the build.

The steps to be executed are:

1. Delete the directory at my library out path dist-lib
2. start building my-lib with --watch option
3. run wait-for-lib.js to wait until the my-lib output directory is created
4. start dev server for my-app

package.json

{
  "scripts": {
    "start": "npm-run-all clean:lib --parallel start:**",
    "start:app": "node ./scripts/wait-for-lib.js && ng serve",
    "start:lib": "ng build my-lib --watch",
    "clean:lib": "shx rm -rf ./dist-lib"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "shx": "^0.3.3"
  }
}

angular.json

{
  "projects": {
    "my-app": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "outputPath": "dist"
          },
          ...
        }
      }
    },
    "my-lib": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "outputPath": "dist-lib"
          },
          ...
        }
      }
    },
  },
  "defaultProject": "my-app"
}

./scripts/wait-for-lib.js

const fs = require('fs');

const pathToMyLib = './dist-lib/my-lib';

function waitFor(path) {
    console.log(`Waiting for ${path} is created...`);
    if (!fs.existsSync(path))
        setTimeout(() => waitFor(path), 1000);
}

waitFor(pathToMyLib);

Heiser