Angular CLI - 检测库更改以重新构建使用的应用程序



我正在开发一个 Angular 库,并具有典型的设置,即我有我的库项目,然后是另一个我正在使用构建库输出的项目。

我希望能够监视库源文件并自动重建我的库。我还希望我的使用应用程序在检测到我的库已重建时重新生成。

在我的应用程序检测到库更改的情况下,我相信这已经设置好了,因为ng serve会自动监视文件更改,并且在我的应用程序的 tsconfig 中,我的 lib 的路径映射到构建库输出的dist文件夹。如果我手动更改 dist 文件夹中的这些文件之一,则会触发我的消费应用程序的重建,以便该部分正常工作。

在监视库更改的情况下,我已经看到我可以指定我的库名称和监视标志作为构建命令的一部分,因此:

ng build my-lib --watch

我的 package.json 中定义了以下脚本:

"start": "npm run build && ng serve",
"build": "ng build && npm run bundle-styles",
"bundle-styles": "scss-bundle -c scss-bundle.config.json"

我假设我需要在单独的进程中生成库中的监视,因此我的任务中可能需要一个仅用于构建和监视我的库的进一步脚本?

然后在另一个进程中运行构建脚本,该脚本将为我的消费应用程序提供服务。

我确实尝试过这样做,但我的bundle-styles任务遇到了一个问题,我需要在 angular cli 构建完成后但在它开始观察变化之前执行。我开始认为我可能需要使用类似gulp

在库中开发更改以查看它们在使用应用程序中被检测和重建时,正确的方法是什么?

谢谢

对于简单的应用程序,您现有的设置是正确的。当我的应用程序加载时,我生成了两个进程,一个使用 --watch 构建一个库,另一个为我的主应用程序提供服务。但是,如果您开始执行复杂的事情,例如捆绑样式任务,或者如果您在添加库组件然后在延迟加载模块中引用它时发现ng serve中断(在我的项目中发生),您应该咬紧牙关并编写自定义脚本。就我而言,我需要从ng build lib-name --watch获取输出,如果我读到存在编译错误,我可以先重新启动构建过程,如果仍然存在编译错误,请通知自己该错误。同样,当库更改时,我经常需要重新服务主应用程序,因此当库重建中不再有任何错误时,我会重新启动ng serve过程。

我知道这并不理想,但如果你想做一些 Angular 团队自己没有开发的东西,现有的ng选项就不会削减它。

相关内容

  • 没有找到相关文章

最新更新