具有多个项目和库的 Angular 构建过程答案

【问题标题】：Angular build process with multiple projects and libraries具有多个项目和库的 Angular 构建过程
【发布时间】：2019-09-20 21:00:15
【问题描述】：

前几天我部署了我们前端的第一个版本，在设置所有内容时，我对构建过程感到非常困惑。大多数 Angular 应用程序并不真正为使用工作区功能而烦恼，因为这样做的唯一原因是，如果您正在制作多个单独的应用程序，这些应用程序通过库共享代码，例如希望物理分离客户端 UI 和背面-office 用户界面。

到目前为止，我一直在关注一篇关于 Angular 库项目的写得很好的文章： https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5

不幸的是，与大多数文章一样，除了与库项目本身有关的构建过程之外，构建过程非常模糊。我确实使用以下命令管理并运行了所有内容（我在 package.json 的脚本部分创建了一个脚本）：

ng build my-lib-project-name && ng build && ng build my-ui-project-name --output-hashing=all --configuration=demo

然后我只是将 dist/my-ui-project-name 的内容复制到服务器并完成（实际构建过程也在云服务器上）。

我觉得奇怪的是，在我构建导入我的库的主项目之前必须进行第二次 ng 构建，否则我的主项目构建将无法找到我的库项目。这当然不是 ng serve 所必需的，只有构建 lib 才能正常工作。

我的 --prod 标志也有问题，因为显然我的组件之一无法找到：

ERROR in : Cannot determine the module for class SideNavMenuItemComponent in <my_path_to_project>/projects/my-lib-project-name/src/lib/layout/sidebar/side-nav-menu/side-nav-menu-item.component.ts! Add SideNavMenuItemComponent to the NgModule to fix it.

这当然只发生在 --prod 构建期间，并且在没有标志或在 ng serve 的情况下工作得很好，因为我显然已经将它包含在 NgModule 中。

这让我认为我的构建过程可能不是最好的。是否有人为他们的多项目 Angular 应用程序设置了构建过程？以多种环境管理为重中之重？

我只在主 package.json 中添加了一些脚本，并且我的 angular.json 中有默认的构建配置。此外，我们目前仍在使用 Angular 7，我们将在不久的将来迁移到 8。

【问题讨论】：

我也有同样的问题
@Fasco 想通了

标签： angular typescript build configuration

【解决方案1】：

我设法弄清楚了这一点。基本上问题在于进口。我从 my-lib-project-name 导入了很多组件/服务/等，正确的做法是：

import {SomeService, ISomeInterface} from 'my-lib-project-name';

但有时我的 IDE (webstorm) 会自动导入路径错误的内容：

import {SomeService} from '../../../../../../../my-lib-project-name/src/lib/some-path/some-service.service';

这很好用 ng serve as serve 只是直接从项目文件中获取文件，因此来自一个项目的任何相对路径肯定会与另一个项目一起使用（除非你移动东西）。另一方面，构建会构建您的项目并将内容放在 dist 文件夹中，因此任何相对路径都不再具有任何意义。

总之，只需在项目范围内搜索包含此类字符串的任何长路径 '../../my-lib-project-name' 并将其替换为 'my-lib-project-name'。

【讨论】：