Angular 6中单个项目下的多个应用程序

JS

# 在Angular 6中管理多个应用程序的单一项目

Angular 6为开发者提供了强大的工具和结构，使他们能够在单一项目中管理多个应用程序。这为开发大规模应用和使用相同代码库构建不同版本的应用提供了便利。在本文中，我们将深入探讨如何在Angular 6中创建和管理单一项目下的多个应用程序，并提供一个简单而实用的案例代码。

## 项目结构和配置

在开始之前，确保你已经安装了Angular CLI（命令行界面）并创建了一个新的Angular项目。接下来，我们将通过以下步骤为项目添加多个应用程序。

1. 创建新应用程序： 使用Angular CLI创建一个新的应用程序。我们将创建两个应用程序，一个命名为"app1"，另一个为"app2"。

bash
    ng generate application app1
    ng generate application app2
    

2. 配置多应用程序： 在angular.JSon文件中，你会看到一个projects对象，其中包含了每个应用程序的配置。确保每个应用程序都有独立的配置。

JSon
    "projects": {
      "app1": {
        // 应用程序1的配置
      },
      "app2": {
        // 应用程序2的配置
      }
    }
    

## 共享代码和模块

在单一项目中管理多个应用程序的一个关键优势是能够共享代码和模块。让我们讨论如何在这些应用程序之间共享代码。

公共模块

创建一个公共模块，其中包含可在所有应用程序中共享的组件、服务和管道。在每个应用程序的模块中导入这个公共模块。

typescript
// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent } from './shared.component';
@NgModule({
  declarations: [SharedComponent],
  imports: [CommonModule],
  exports: [SharedComponent]
})
export class SharedModule { }

在应用程序中使用

在每个应用程序的模块中导入并使用共享模块。

typescript
// app1.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from '../shared/shared.module';
import { App1Component } from './app1.component';
@NgModule({
  declarations: [App1Component],
  imports: [BrowserModule, SharedModule],
  bootstrap: [App1Component]
})
export class App1Module { }

typescript
// app2.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from '../shared/shared.module';
import { App2Component } from './app2.component';
@NgModule({
  declarations: [App2Component],
  imports: [BrowserModule, SharedModule],
  bootstrap: [App2Component]
})
export class App2Module { }

##

通过Angular 6的强大功能，我们能够在单一项目下管理多个应用程序，从而更轻松地共享代码和模块。通过上述案例代码，我们演示了如何配置项目结构、创建应用程序以及共享代码。这为开发者提供了更灵活的选项，使他们能够更高效地构建和维护大型Angular项目。