使用Angular的Environment来部署多个环境的应用程序

目的

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

アプリAアプリBController A○○Controller B
○Controller C
○Controller D
○Controller E○

为了更好地管理,我们将仓库分成多个部分,然而管理情况却变得很糟糕。所以我们决定将这个应用迁移到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的環境的應用程序。

ProdProd-limitedMenu○○Component1○○Component2○
Component3○○

创建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

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

スクリーンショット 2017-01-01 14.40.55.png

产品限量

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

ng serve -e prod-limited

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

スクリーンショット 2017-01-01 14.41.32.png

总结

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

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

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

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

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

    • Quickstart – ts – QUICKSTART

 

    angular/angular-cli: CLI tool for Angular