Angular library and live reload

Question

I followed several tutorials on how to build and test an angular libary.

E.g. https://www.youtube.com/watch?v=lvjt9rBHWjo

It\'s working fine except

Answer 1

You can use wait-on to await the building of the library, rimraf to clean the dist directory and npm-run-all to run the watch scripts parallel with one command from one command line window. Therefore install wait-on, rimraf and run-p as development dependency:

npm install wait-on --save-dev
npm install rimraf --save-dev
npm install run-p --save-dev

And update in package.json the scripts consequently based on the example below:

  "scripts": {
    ...
    "clean": "rimraf dist",
    "start:app": "wait-on dist/your-library-name/fesm5 && ng serve --poll 2000",
    "watch:lib": "ng build your-library-name --watch",
    "watch:all": "npm run clean && run-p watch:lib start:app",
    ...
  },

The library and the application together can be watched using npm run watch:all command.

This is how the scripts work:

"clean": "rimraf dist"

Removes the dist folder.

"start:app": "wait-on dist/your-library-name/fesm5 && ng serve --poll 2000"

Waits on the fesm5 folder in the dist directory, ng serve --poll 2000 starts the app and extends the file watch polling time to 2000 ms. In my case the last one was necessary because after a library modification the app was able to reload in the browser with the same content as previously, I could only see the new build after pressing F5.

"watch:lib": "ng build your-library-name --watch"

Builds the library in watch mode.

"watch:all": "npm run clean && run-p watch:lib start:app"

Cleans the dist folder, after that it serves the application and watches the library parallel.