如何使 Angular 监视多个库的变化并在需要时重新编译

How to make Angular watch multiple libraries for changes and recompile when needed

这个问题与 Make angular app watch for libraries changes and update itself. But, that question was never successfully answered as applies to the use of multiple libraries. I also reviewed Angular library and live reload 非常相似,并调查了两个问题的答案和链接。

我的应用程序使用两个库:lib-1lib-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。如前所述,这不会“监视”我的库的变化。

我查看了建议和其他 SO 问题(以上),确保现在安装了 npm-run-allwait-onrimraf 库。

我写了这些新的 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.

脚本 运行s 并继续并行构建库(坏主意?),然后抛出错误:sh: start:staging: command not found.

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

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

我希望得到一些关于更正我的语法的明智建议,以便该应用程序将编译和监视我的库文件以及应用程序 src 文件夹中的其他文件。

经过大量调查,我遇到了 Nikola Kolev's Angular 6: build — watch multiple dependent libraries in one shell post

虽然我没有像 Nikola 那样将它简化为一个 npm 脚本,但我可以通过 运行ning 两个脚本(总共涉及 7 个脚本)来完成,那就是现在足够好了。等我有更多的时间,我会努力浓缩成一个。

首先,一定要有wait-on, rimraf and npm-run-all installed. We're also using 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 在第二个终端。然后,我可以在浏览器中启动该应用程序,对库中或应用程序本身中的任何代码进行的任何编辑都会被捕获,并且该应用程序会根据需要重新编译。