从一个 Angular 9 项目创建多个应用程序

Question

我的目标是拥有一个具有共享部分的 Angular 项目：功能、类、外观、服务和页面组件（页眉、页脚、一些指令）。 然后在它内部有 2 个（或更多应用程序）将使用共享部分并在其顶部添加自己的组件（页面）和路由。

然后这两个应用程序应该构建到不同的 dist 文件夹，因此可以部署到不同的位置（URL）。 而且我希望能够同时运行（服务）它们（可能在不同的端口上）。

我想我应该从在项目中创建新应用程序开始：

ng generate application app1 --routing
ng generate application app1 --routing

和图书馆？ （对于共享组件）。 那正确吗？

我应该如何配置 angular.json 文件以进行服务和构建？ 我应该如何配置 app.module.ts 文件？

Answer 1

直接来自 Angular 指南工作区和项目文件结构 - 多个项目

多个项目

多项目工作区适用于对所有 Angular 项目（“monorepo”模型）使用单个存储库和全局配置的企业。 多项目工作区还支持库开发。

设置多项目工作区

如果您打算在一个工作区中拥有多个项目，则可以在创建工作区时跳过初始应用程序生成，并为工作区指定一个唯一名称。 以下命令使用所有工作区范围的配置文件创建一个工作区，但没有根级应用程序。

 ng new my-workspace --createApplication="false"

然后，您可以生成名称在工作区中唯一的应用程序和库。

 cd my-workspace ng generate application my-first-app

多项目文件结构

第一个显式生成的应用程序与工作区中的所有其他项目一起进入projects/文件夹。 新生成的库也添加到projects/下。 通过这种方式创建项目时，工作区的文件结构与工作区配置文件的结构完全一致， angular.json 。

 my-workspace/... (workspace-wide config files) projects/ (generated applications and libraries) my-first-app/ --(an explicitly generated application)... --(application-specific config) e2e/ ----(corresponding e2e tests) src/ ----(e2e tests source)... ----(e2e-specific config) src/ --(source and support files for application) my-lib/ --(a generated library)... --(library-specific config) src/ --source and support files for library)

库项目文件

当您使用 CLI 生成库时（使用诸如ng generate library my-lib之类的命令），生成的文件 go 到工作区的项目/文件夹中。 有关创建您自己的库的更多信息，请参阅创建库。

库（与应用程序及其关联的 e2e 项目不同）有自己的package.json配置文件。

在projects/文件夹下， my-lib文件夹包含您的库代码。

它继续在表格中描述库项目文件及其用途。 我建议进一步阅读上面的文档和相关链接，因为它有据可查，可能会让您快速启动并运行。

要在不同的端口上运行多个 Angular 应用程序，只需打开另一个终端并为每个应用程序运行ng serve --port 1234 。 请参阅Angular(2) - 使用 CLI 运行两个项目

Answer 2

听起来您想使用 monorepo 方法。 我建议使用https://nx.dev/angular 。

Answer 3

我会为不同的应用程序推荐不同的项目，并执行以下操作之一

1. 将可重用代码放入可以为每个项目发布和安装的包中
2. 利用 git 子模块来保存可重用代码并为每个项目安装 git 子模块

我更喜欢选项 2 到 1