如何让Angular监视多个库的更改并在需要时重新编译

Question

这个问题和Make angular app watch for libraries changes and update itself很相似。但是，这个问题从来没有被成功回答，因为它适用于多个库的使用。我还回顾了Angular library and live reload，并调查了这两个问题的答案和链接。

我的应用程序使用了两个库：lib-1和lib-2。编辑这些文件时，它们将被忽略，并且应用程序不会重新编译。要查看更改，我必须重新启动服务器，这会真正减慢速度。

我的期望是，在编辑库文件时，应该重新编译应用程序，就像编辑其他应用程序内部文件时一样。

这是我继承的一个Angular项目，原来的作者不再可用。我使用的是Angular v10和npm 6.14.11

初始npm脚本为：

"start:staging": "ng serve --configuration-staging --host 0.0.0.0 --port 8080 --disableHostCheck",
"build:lib-1": "ng build lib-1 && cpx projects/lib-1/src/lib/theme.scss dist/lib-1",
"build:lib-2": "ng build lib-2 && cpx projects/lib-2/src/lib/theme.scss dist/lib-2",
"build:libs": "npm run build:lib-1 && npm run build:lib-2",

有了这些，我首先运行npm run build:libs，然后运行npm run start:staging。如前所述，这不会“监视”我的库中的更改。

我检查了上面的建议和其他问题，确保现在已经安装了npm-run-all、wait-on和rimraf库。

我写了这些新的npm脚本：

"clean": "rimraf dist",
"start-app": "wait-on dist/lib-1/fesm2015 dist/lib-2/fesm2015 && start:staging --poll 2000",
"watch:lib-1": "npm run build:lib-1 --watch",
"watch:lib-2": "npm run build:lib-2 --watch",
"watch-libs": "npm-run-all --parallel watch:lib-1 watch:lib-2",
"watch-all": "npm-run-all clean --parallel watch-libs start-app"

而且，我使用的是已经存在的start:staging脚本，就像写的一样。

我运行npm run watch-all。

脚本运行并进入并行构建库的阶段(坏主意？)，然后抛出错误：sh: start:staging: command not found。

我删除了--parallel开关，并再次尝试，但得到了相同的错误。

start:staging脚本确实在脚本对象中，我不知道为什么找不到它。

我希望得到一些明智的建议来纠正我的语法，以便应用程序将编译并监视我的库文件以及应用程序的src文件夹中的其他文件。

Answer 1

经过大量的调查，我偶然发现了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。然后，我可以在浏览器中启动应用程序，对库中或应用程序本身中的任何代码所做的任何编辑都会被捕获，并且应用程序会根据需要重新编译。