从一个 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 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 运行两个项目