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

问题描述

我开发了三个助手 angular 库，由另一个主要应用程序使用.理想的情况是在我的主应用程序导入这些库并同时运行的同时对库进行实时重建，这样我就可以在库的开发过程中实时重新加载主应用程序.

我找到了 ng build --watch 并且我将它多次与 run-s 一起用于我的每个库然后 npm link构建文件夹，然后在我的主应用程序中 npm link my-libary.

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

期望是当我修改一个库并保存时，它将被重建，我的 angular 应用程序将使用新重建的库而不会大喊大叫错误.我怎样才能做到这一点

我的脚本是:

<预><代码>...脚本":{ng":ng"，预启动":run-s \"ng build Lib-1 --prod --watch\"\ng build Lib-2 --prod --watch\"\ng build Lib-3 --prod --watch\""开始":节点 --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve"...}...

解决方案

我问了一个类似的问题 此处，并且能够在我启动应用程序时观看我的库.我把答案复制到这里给任何感兴趣的人.

经过大量调查后，我遇到了 Nikola Kolev 的 Angular 6:构建 — 在一个 shell 帖子中观察多个依赖库.

虽然我没有像 Nikola 那样将它归结为一个 npm 脚本，但我可以通过运行两个脚本来完成(总共涉及 7 个脚本)，这对于现在来说已经足够了.

>

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

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.

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.

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

My script is:

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

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

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.

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.

Here are all the scripts:

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

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屋！