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

Question

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

到目前为止，我一直在关注一篇写得很好的关于 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 来说当然不是必需的，仅构建库就可以正常工作。

我还遇到了 --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 build 期间，并且在没有标志的情况下工作得很好，或者在 ng serve 中工作，因为我显然已经将它包含在 NgModule 中。

这让我觉得我的构建过程可能不是最好的。有没有人为他们的多项目 Angular 应用程序设置构建过程？将多重环境管理作为首要任务？

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

Answer 1

我设法解决了这个问题。基本上问题在于进口。 我从我的 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 一起工作得很好，因为 serve 只是直接从项目文件中获取文件，因此一个项目的任何相对路径肯定会与另一个项目一起工作(除非你移动东西)。另一方面，Build makes builds you projects and puts stuff in a dist folder,所以任何相对路径都不再有任何意义。

总而言之，只需在项目范围内搜索包含像这样的字符串的任何长路径 '../../my-lib-project-name' 并将其替换为 '我的库项目名称'.