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

Question

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

然后这 2 个应用程序应该构建到不同的 dist 文件夹，以便可以将它们部署到不同的地方（URL）。我希望能够同时运行（服务）它们（也许在不同的端口）。

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

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

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

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

Answer 1

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

Answer 2

直接来自 Angular 指南 Workspace and project file structure - Multiple projects

Multiple projects

A multi-project workspace is suitable for an enterprise that uses a single repository and global configuration for all Angular projects (the "monorepo" model). A multi-project workspace also supports library development.

Setting up for a multi-project workspace

If you intend to have multiple projects in a workspace, you can skip the initial application generation when you create the workspace, and give the workspace a unique name. The following command creates a workspace with all of the workspace-wide configuration files, but no root-level application.
ng new my-workspace --createApplication="false"
You can then generate apps and libraries with names that are unique within the workspace.
cd my-workspace
ng generate application my-first-app
Multiple project file structure

The first explicitly generated application goes into the projects/ folder along with all other projects in the workspace. Newly generated libraries are also added under projects/. When you create projects this way, the file structure of the workspace is entirely consistent with the structure of the workspace configuration file, 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)
Library project files

When you generate a library using the CLI (with a command such as ng generate library my-lib), the generated files go into the projects/ folder of the workspace. For more information about creating your own libraries, see Creating Libraries.

Libraries (unlike applications and their associated e2e projects) have their own package.json configuration files.

Under the projects/ folder, the my-lib folder contains your library code.

它在 table 中继续描述库项目文件及其用途。我建议进一步阅读上面的文档和相关链接，因为它有详细的文档记录，可能会让你快速运行ning。

要在不同端口上运行多个 Angular 应用程序，只需打开另一个终端并运行 ng serve --port 1234 每个应用程序。参见

Answer 3

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

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

比起选项 1，我更喜欢选项 2

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

Create multiple application from one Angular 9 project

angular-cli

angular

angular-json

angular9

Multiple projects

Setting up for a multi-project workspace

Multiple project file structure

Library project files