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

2024-05-23

这个问题与让 Angular 应用程序监视库更改并进行自我更新 https://stackoverflow.com/questions/60473727/make-angular-app-watch-for-libraries-changes-and-update-itself。但是,这个问题从未成功回答,因为它适用于多个库的使用。我还回顾了Angular 库和实时重新加载 https://stackoverflow.com/questions/59356732/angular-library-and-live-reload/59706221#59706221并调查了这两个问题的答案和链接。

我的应用程序使用两个库:lib-1 and 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, then npm run start:staging。如前所述,这不会“监视”我的库的更改。

我审查了这些建议和其他 SO 问题(上面),并确保npm-run-all, wait-on and 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脚本,如所写。

I run npm run watch-all.

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

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

The start:stagingscript 确实在脚本对象中,我不明白为什么没有找到它。

我希望得到一些有关纠正语法的明智建议,以便应用程序能够编译并监视我的库文件以及应用程序内部的其他文件src folder.


经过大量侦查,我发现Nikola Kolev 的 Angular 6:构建 — 在一篇 shell 帖子中观看多个依赖库 https://medium.com/@ntkolev/angular-6-build-watch-multiple-dependent-libraries-in-one-shell-562a5131788c.

虽然我没有像 Nikola 那样只剩下一个 npm 脚本,但我可以通过运行两个脚本来完成(总共涉及 7 个脚本),目前就足够了。当我有更多时间时,我会努力压缩为一个。

首先,一定要具备wait-on https://www.npmjs.com/package/wait-on, rimraf https://www.npmjs.com/package/rimraf and npm 运行所有 https://www.npmjs.com/package/npm-run-all安装。我们也在使用cpx https://www.npmjs.com/package/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在第二个航站楼。然后,我可以在浏览器中启动应用程序,并且捕获对库中或应用程序本身中任何代码的任何编辑,并且应用程序根据需要重新编译。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐