Question

前几天，我已经部署了前端的第一个版本，并且在进行所有设置时，我对构建过程感到非常困惑。大多数Angular应用程序并不真正在意使用工作区功能，因为这样做的唯一原因是，如果您要制作多个单独的应用程序，这些应用程序由于某种原因而通过库共享代码，例如出于物理上将客户端UI和后台分离的原因。办公室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来说这不是必需的，仅构建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的情况下也可以正常工作，因为我显然已将其包含在NgModule中。

这使我认为我的构建过程可能不是最好的。有人为他们的多项目Angular应用提供构建过程设置吗？借助多个环境管理就可以了吗？

我只向main package.json添加了一些脚本，而我的angular.json中具有默认的构建配置。另外，我们目前仍在使用Angular 7，并且不久的将来将使用Angular 7。

Answer 1

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

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

但是有时候我的IDE（网络风暴）会自动导入路径错误的东西：

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

这与ng serve效果很好，因为Serve直接从项目文件中获取文件，因此来自一个项目的任何相对路径都肯定可以与另一个项目一起使用（除非您移动东西）。另一方面，构建使您可以构建项目并将其放置在dist文件夹中，因此任何相对路径都不再有意义。

最后，只需在项目范围内搜索包含诸如'../../my-lib-project-name'这样的字符串的长路径，然后将其替换为'my-lib-project-name'。

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

1 个答案: