Angular build watch for multiple libraries and and serve to another app

问题

I developing three helper angular libraries that consumed by another main application. The ideal is having live rebuild for the libaries while my main app import those libraies and run at the same time so I can have live reload for my main app during development process of the libraries.

I found ng build --watch and I use it mutiple times with run-s for each of my libary then npm link the built folder then npm link my-libary in my main app.

But the problem is when a libary is rebuilt, It first erase the linked files in dist folder (which linked by npm locally) and my main app start yelling compiler error and stop.

The expectation is when I modify a library and save, It will be rebuilt and my angular app will consume the newly rebuilt library without yelling errors. How can I achieve this

My script is:

...
"scripts": {
    "ng": "ng",
    "prestart": "run-s \"ng build Lib-1 --prod --watch\" \"ng build Lib-2 --prod --watch\" \"ng build Lib-3 --prod --watch\" "
    "start": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve"
 ...
}
...   

回答1:

I asked a similar question here, and was able to have my libraries watched when I launch the app. I'm copying the answer over here for any interested folks.

After a lot of sleuthing, I came across Nikola Kolev's Angular 6: build — watch multiple dependent libraries in one shell post.

While I don't have it down to one npm script like Nikola was able to do, I am able to do it by running two scripts (there are 7 total scripts involved), and that's good enough for now.

First, be sure to have wait-on, rimraf and npm-run-all installed. We're also using cpx; but, that's not about getting the libraries to be "watched" -- just including to be overly thorough.

Here are all the scripts:

"clean": "rimraf dist",
"watch-lib:lib-1": "ng build lib-1 --watch",
"watch-lib:lib-2": "ng build lib-2 --watch",
"watch-libs": "npm-run-all clean --parallel watch-lib:*",
"copy-styles:lib-1": "cpx projects/lib-1/src/lib/theme.scss dist/lib-1",
"copy-styles:lib-2": "cpx projects/lib-2/src/lib/theme.scss dist/lib-2",
"start-staging": "ng serve --configuration-staging --host 0.0.0.0 --port 8080 --disableHostCheck",  
"watch-staging": "npm-run-all copy-styles:* start:staging"

When I want to work on the libraries and have them be "watched", I run npm run watch-libs in one terminal. When that is finished, I run npm run watch:staging in a second terminal. Then, I'm able to launch the app in a browser, and any edits to any of the code, in libraries or in the app itself are caught, and the app recompiles as desired.

回答2:

You're unnecessarily complicating it. You don't need to use any third party library or utilize script like prestart to watch the changes.

Here it is explained that how to make angular app watch for changes in angular library and update itself.

Here is the working github repo:- https://github.com/sumitparakh/ng-lib-watch

来源：https://stackoverflow.com/questions/60473727/angular-build-watch-for-multiple-libraries-and-and-serve-to-another-app