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

?

Answer 1

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

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')

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);