angular - 从一个 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

直接来自 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.

它继续在表格中描述库项目文件及其用途。我建议进一步阅读上面的文档和相关链接，因为它有详细的文档记录，可以帮助您快速启动和运行。

要在不同端口上运行多个 Angular 应用程序，只需打开另一个终端并为每个应用程序运行 ng serve --port 1234。参见 Angular(2) - Running two projects with CLI