3

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

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

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

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

和图书馆？（对于共享组件）。是对的吗？

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

4

3 回答 3

5

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

多个项目

多项目工作区适用于对所有 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）生成库时，生成的文件将进入工作区的 projects/ 文件夹。有关创建您自己的库的更多信息，请参阅创建库。

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

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

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

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

于 2020-04-16T15:54:02.177 回答
1

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

于 2020-04-16T15:40:44.063 回答
0

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

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

我更喜欢选项 2 到 1

于 2020-08-30T17:54:07.403 回答