目的

最初我們在Angular（1.x）中開發應用程式，並釋出了兩個功能相似的應用程式。
每個應用程式都使用了一些控制器，但是這些應用程式都有許多共同的功能（頁面）。

为了更好地管理，我们将仓库分成多个部分，然而管理情况却变得很糟糕。所以我们决定将这个应用迁移到Angular（2.x）并将其组件化，以便能够通过一个仓库来进行管理。

政策

如果使用Angular CLI来构建Angular（2.x）应用程序，则可以在构建过程中使用environment来切换环境。
由Angular CLI创建的代码在初始状态下设置了以下两个环境。

"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

只存在两种环境，即开发环境和生产环境。
通过准备多个生产环境，可以支持多个应用程序。

样本

构成

我們將製作一個具有四個組件的應用程序。我們將創建名為Prod和Prod-limited的環境的應用程序。

创建Component

如果尚未安装Angular CLI，请事先使用以下命令进行安装。

npm install -g angular-cli

首先，需要创建一个基本的代码。

ng new angular-multi-build-sample

使用Angular CLI进行创建。

ng g component menu
ng g component component1
ng g component component2
ng g component component3

菜单组件.ts

这里的存在与否并不重要，但为了清晰地了解是否可以使用Component，我们将创建一个汇总了链接到已加载的Component的页眉菜单。

编辑已生成的menu.component.ts文件。
在这里，我们像app.module.ts一样，加载environment的routes元素并将其设置为成员变量。

import { Component, OnInit } from '@angular/core';
import { Routes } from '@angular/router';
import { environment } from '../../environments/environment';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
  private routes: Routes = [];

  constructor() {
    this.routes = environment.routes;
  }

  ngOnInit() { }
}

菜单组件.html

然后，将加载到menu.component.html的组件的链接以列表形式输出。

<ul>
  <li *ngFor="let route of routes">
    <a routerLink="{{route.path}}">{{route.path}}</a>
  </li>
</ul>

设置各种环境

环境.prod.ts

编辑用于Prod环境的Environment。
由于environment.prod.ts是使用Angular CLI创建的，所以需要编辑该文件。

import { Component1Component } from '../app/component1/component1.component';
import { Component2Component } from '../app/component2/component2.component';
import { Component3Component } from '../app/component3/component3.component';

export const environment = {
  production: true,
  routes: [
    {
      path: 'component1',
      component: Component1Component
    }, {
      path: 'component2',
      component: Component2Component
    }, {
      path: 'component3',
      component: Component3Component
    }
  ]
};

我会加载在该环境中使用的组件，并准备一个对象数组，将其作为路由处理。

环境。prod-limited.ts

接下来，我们要创建一个适用于Prod-limited环境的环境（Environment）。
在environment文件夹下创建一个environment.prod-limited.ts文件，并像environment.prod.ts一样定义组件的导入和路由数组。
然而，由于我们希望在Prod-limited环境中仅能使用Component1和Component3，因此不加载Component2。

import { Component1Component } from '../app/component1/component1.component';
import { Component2Component } from '../app/component2/component2.component';
import { Component3Component } from '../app/component3/component3.component';

export const environment = {
  production: true,
  routes: [
    {
      path: 'component1',
      component: Component1Component
    }, {
      path: 'component3',
      component: Component3Component
    }
  ]
};

设置路由

app.module.ts 文件

我們將實現執行路由的部分。
我們將將環境的routes元素的陣列提供給RouterModule的Routes陣列。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';
import { Component1Component } from './component1/component1.component';
import { Component2Component } from './component2/component2.component';
import { Component3Component } from './component3/component3.component';
import { MenuComponent } from './menu/menu.component';

const routes: Routes = environment.routes;

@NgModule({
  declarations: [
    AppComponent,
    Component1Component,
    Component2Component,
    Component3Component,
    MenuComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

另外，为了能够显示MenuComponent，我们将其添加到declarations中。

app.component.html 文件

最後，我们将进行显示每个组件的设置。
在app.component.html文件中，写入app-menu和router-outlet标签。
app-menu标签将插入之前创建的MenuComponent。
router-outlet标签将根据URL路径插入相应的Component。

<app-menu></app-menu>
<router-outlet></router-outlet>

执行结果

我将执行示例代码。

产品

使用以下命令启动开发服务器。

ng serve -e prod

所有组件都在菜单中显示，并且可以点击链接进行转换。

产品限量

改为以下中文翻译：使用不同的选项参数来启动服务器。

ng serve -e prod-limited

无法在菜单中显示Component2，并且无法访问http://localhost:4200/component2。

总结

通过使用Angular CLI的Environment功能，我能够为多个环境构建应用程序。
我实际使用这个功能是因为在某个应用程序中，我需要部署限制管理员和其他用户使用的功能和不限制使用的功能。（如上表所示）

如果要正确实施应用程序的功能限制，我认为最好与后端进行良好的协作，并通过权限进行控制。
对于我目标的这个应用程序来说，由于在后端组合了多个API，并且没有太严格的认证要求，所以我选择了这种方法。

这次的源代码我放在这里了。

木子皮克敏/角度多重建立示例

在中国，我只需要一种选项。

• Quickstart – ts – QUICKSTART

angular/angular-cli: CLI tool for Angular