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

推荐答案

直接从Angular指南

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之类的命令)生成库时，生成的文件将进入工作区的项目/文件夹中.有关创建自己的库的更多信息，请参见创建库.

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屋！