Angular构建监视多个库，并为另一个应用程序提供服务

Question

我开发了三个辅助angular libraries，由另一个主应用程序使用。理想的做法是在我的主应用程序导入这些库并同时运行的同时，对库进行实时重建，这样我就可以在库的开发过程中对我的主应用程序进行实时重新加载。

我找到了ng build --watch，并多次将其与run-s一起用于我的每个库，然后在我的主应用程序中npm link构建的文件夹，然后是npm link my-libary。

但问题是，当一个库被重建时，它首先删除dist文件夹中的链接文件(由npm本地链接)，我的主应用程序开始大喊编译器错误并停止。

我们的期望是，当我修改一个库并保存时，它将被重建，并且我的angular应用程序将使用新重建的库，而不会出现错误。我怎样才能做到这一点？

我的脚本是：

...
"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"
 ...
}
...   

Answer 1

我问了一个类似的问题here，当我启动应用程序时，我的库可以被监视。我将答案复制到这里，供感兴趣的人参考。

经过大量的调查，我偶然发现了Nikola Kolev's Angular 6: build — watch multiple dependent libraries in one shell post。

虽然我没有像Nikola那样的npm脚本，但我可以通过运行两个脚本(总共涉及7个脚本)来做到这一点，就目前而言，这已经足够了。

首先，确保安装了wait-on、rimraf和npm-run-all。我们也在使用cpx；但是，这并不是为了让库被“监视”--只是包括过于彻底。

下面是所有的脚本：

"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"

当我想要在库上工作并让它们被“监视”时，我会在一个终端上运行npm run watch-libs。完成后，我在第二个终端中运行npm run watch:staging。然后，我可以在浏览器中启动应用程序，对库中或应用程序本身中的任何代码所做的任何编辑都会被捕获，并且应用程序会根据需要重新编译。

Answer 2

你不必要地把它复杂化了。您不需要使用任何第三方库或使用诸如prestart之类的脚本来查看更改。

这里解释了how to make angular app watch for changes in angular library and update itself。

以下是正在运行的github存储库：- https://github.com/sumitparakh/ng-lib-watch