Angular 构建多个库的监视并服务于另一个应用程序

Question

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

我发现 并在我的每个库中ng build --watch多次使用它，然后在我的主应用程序中使用构建的文件夹。run-snpm linknpm link my-libary

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

期望是当我修改库并保存时，它将被重建，并且我的角度应用程序将使用新重建的库而不会出现错误。我怎样才能实现这个目标

我的脚本是：

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

Answer 1

我在这里问了类似的问题，并且在启动应用程序时能够观看我的图书馆。我将答案复制到这里供任何感兴趣的人使用。

\n

经过大量调查后，我发现了Nikola Kolev 的 Angular 6: build \xe2\x80\x94 watch multiple dependentlibrary in one shell post。

\n

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

\n

首先，请确保安装了wait-on、rimraf和npm-run-all。我们还使用cpx；但是，这并不是要让图书馆受到“监视”——只是包括过于彻底。

\n

以下是所有脚本：

\n

"clean": "rimraf dist",\n"watch-lib:lib-1": "ng build lib-1 --watch",\n"watch-lib:lib-2": "ng build lib-2 --watch",\n"watch-libs": "npm-run-all clean --parallel watch-lib:*",\n"copy-styles:lib-1": "cpx projects/lib-1/src/lib/theme.scss dist/lib-1",\n"copy-styles:lib-2": "cpx projects/lib-2/src/lib/theme.scss dist/lib-2",\n"start-staging": "ng serve --configuration-staging --host 0.0.0.0 --port 8080 --disableHostCheck",  \n"watch-staging": "npm-run-all copy-styles:* start:staging"\n

\n

当我想要处理这些库并让它们被“监视”时，我会npm run watch-libs在一个终端中运行。完成后，我npm run watch:staging在第二个终端中运行。然后，我可以在浏览器中启动应用程序，并且捕获对库或应用程序本身中任何代码的任何编辑，并且应用程序根据需要重新编译。

\n

Answer 2

你不必要地使事情复杂化了。您不需要使用任何第三方库或使用 prestart 等脚本来观察更改。

这里解释了如何使 Angular 应用程序监视 Angular 库中的更改并更新自身。

这是可用的 github 存储库：- https://github.com/sumitparakh/ng-lib-watch