从一个 Angular 9 项目创建多个应用程序 [英] Create multiple application from one Angular 9 project

问题描述

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

My goal is to have one Angular project with shared parts: functionality, classes, look, services and page components (header, footer, some directives). Then inside it has 2 (or more applications) that will use the shared parts and add on the top of it own components (pages) and routes.

然后这两个应用程序应该构建到不同的 dist 文件夹，以便可以部署到不同的地方(URL).我希望能够同时运行(服务)它们(可能在不同的端口上).

Then these 2 application should build to different dist folders, so the can be deployed to different places (URLs). And I want to be able to run (serve) them at the same time (maybe on different ports).

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

I guess I should start with creating new applications inside project:

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

和图书馆?(对于共享组件).是吗?

and library? (for shared components). Is that right?

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

How should I configure angular.json file for serve and build? And how should I configure app.module.ts files?

推荐答案

Direct from the Angular Guide 工作区和项目文件结构 - 多个项目

Direct from the Angular Guide Workspace and project file structure - Multiple projects

多项目工作区适用于对所有 Angular 项目(monorepo"模型)使用单个存储库和全局配置的企业.多项目工作区也支持库开发.

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.

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

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

多项目文件结构

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

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)

库项目文件

当您使用 CLI 生成库(使用诸如 ng generate library my-lib 之类的命令)时，生成的文件会进入工作区的 projects/文件夹.有关创建自己的库的更多信息，请参阅创建库.

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.

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

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

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

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

在表格中继续描述库项目文件及其用途.我建议进一步阅读上面的文档和相关链接，因为它有很好的文档记录，可能会让您快速上手.

It continues on in a table to describe library project files and their purpose. I'd suggest reading up further on the documentation above and associated links as it is well documented and might get you up and running quickly.

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

To run multiple Angular apps on different ports just open another terminal and run ng serve --port 1234 for each app. See Angular(2) - Running two projects with CLI

这篇关于从一个 Angular 9 项目创建多个应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！