Angular构建监视多个库并投放到另一个应用程序 [英] Angular build watch for multiple libraries and and serve to another app

问题描述

我开发了三个辅助程序角度库，该库被另一个主应用程序使用.理想的情况是对库进行实时重建，而我的主应用程序会导入这些库并同时运行，这样我就可以在库的开发过程中对我的主应用进行实时重建.

I developing three helper angular libraries that consumed by another main application. The ideal is having live rebuild for the libaries while my main app import those libraies and run at the same time so I can have live reload for my main app during development process of the libraries.

我找到了 ng build --watch ，并且对我的每个库使用了 run-s 多次，然后将 npm link 内置文件夹，然后在我的主应用程序中 npm link my-libary .

I found ng build --watch and I use it mutiple times with run-s for each of my libary then npm link the built folder then npm link my-libary in my main app.

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

But the problem is when a libary is rebuilt, It first erase the linked files in dist folder (which linked by npm locally) and my main app start yelling compiler error and stop.

期望是当我修改库并保存时，它将被重建，而我的角度应用程序将使用新重建的库而不会大喊大叫.我该如何实现

The expectation is when I modify a library and save, It will be rebuilt and my angular app will consume the newly rebuilt library without yelling errors. How can I achieve this

我的脚本是:

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

推荐答案

我问了一个类似的问题

I asked a similar question here, and was able to have my libraries watched when I launch the app. I'm copying the answer over here for any interested folks.

经过大量研究，我遇到了尼古拉·科廖夫(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.

首先，请确保具有等待， 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屋！