如何使Angular监视多个库中的更改并在需要时重新编译 [英] How to make Angular watch multiple libraries for changes and recompile when needed

问题描述

这个问题与应用程序监视库的更改并自我更新.但是，这个问题从未成功地回答过，因为它适用于使用多个库.我还查看了 Angular库和实时重新加载，并调查了答案和链接来自两个问题.

This question is much the same as 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 and surveyed the answers and links from both questions.

我的应用程序使用两个库: lib-1 和 lib-2 .编辑这些文件后，它们将被忽略，并且该应用程序不会重新编译.要查看更改，我必须重新启动服务器，这确实会使速度变慢.

My app is using two libraries: lib-1 and lib-2. When those files are edited, they are ignored and the app does not recompile. To see changes, I have to restart the server which really slows things down.

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

My expectation is that the app should be recompile when library files are edited, just like when other app-internal files are edited.

这是我继承的Angular项目，原始作者不再可用.我正在使用Angular v10和npm 6.14.11

This is an Angular project that I have inherited, and the original author is no longer available. I am using Angular v10 and 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 .如所提到的，这不会监视"消息.我的更改库.

With those, I first run npm run build:libs, then npm run start:staging. As mentioned, this does not "watch" my libraries for changes.

我查看了建议和其他SO问题(如上所述)，确保 npm-run-all ， wait-on 和 rimraf 库现在已安装.

I reviewed the suggestions and the other SO questions (above), have ensured that the npm-run-all, wait-on and rimraf libraries are now installed.

我已经编写了以下新的npm脚本:

I have written these new npm scripts:

"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 脚本.

And, I am using the pre-existing start:staging script, as written.

我运行 npm运行监视.

脚本运行并进行到并行构建库的地步(不好的主意?)，然后引发错误: sh:start:staging:命令未找到.

The script runs and proceeds to the point of building the libraries in parallel (bad idea?), and then throws error: sh: start:staging: command not found.

我删除了-parallel 开关，然后重试，并得到相同的错误.

I removed the --parallel switches and tried again, and got the same error.

start:staging 脚本确实在scripts对象中，我无法弄清楚为什么找不到它.

The start:staging script is indeed in the scripts object, and I cannot figure out why it's not being found.

我希望获得有关纠正语法的一些明智建议，以便该应用程序可以编译并监视我的库文件以及该应用程序 src 文件夹中的其他文件.

I'm hoping to get some sage advice on correcting my syntax so that the app will compile and watch my library files along with the other files that are inside the app's src folder.

推荐答案

经过大量侦查，我遇到了 Nikola Kolev的Angular 6:构建-在一个shell发布中观看多个依赖库.

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

虽然我没有尼古拉能做到的一个npm脚本，但我可以通过运行两个脚本(总共涉及7个脚本)来做到这一点，到目前为止已经足够了.当我有更多时间时，我将致力于压缩为一个.

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. I'll work on condensing to one when I get more time.

首先，请确保具有等待， npm-run-all 已安装.我们还在使用 cpx ；但是，这并不是要监视"库.-仅包括过于彻底.

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.

以下是所有脚本:

"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 .然后，我可以在浏览器中启动该应用程序，并捕获对库中或应用程序本身中的任何代码所做的任何编辑，并根据需要重新编译该应用程序.

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.

这篇关于如何使Angular监视多个库中的更改并在需要时重新编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！