angualr6 差异化本地环境管理。

1、背景

使用angular6 ng-alain搭建的项目。
项目对应多个客户，每个客户都有自己定制的模块及功能。
再修改公共模块时需要频繁切换到其他项目下验证下修改是否有影响。

2、解决思路

搭建差异化架构见angualr项目——差异化架构搭建（公共组件及模块复用）
管理不同环境。

方案设计：

在header上增加一个选择菜单，切换菜单时加载不同的配置，显示不同的产品形态。

1）增加菜单选项

import { Component } from '@angular/core';
import { AllENVIRONMENTS } from '@env/dynamic.environment.helper';
import { environment } from '@env/environment';

@Component({
  selector: 'development-environment',
  template: `
    <nz-tooltip [nzTitle]="'本地环境切换'" [nzPlacement]="'bottom'" *ngIf="!production">
      <li *ngIf="!production" class="hidden-xs" nz-tooltip>
        <nz-dropdown nzPlacement="bottomRight">
          <div class="item" nz-dropdown nz-tooltip>
              <i class="anticon anticon-bars"></i>
          </div>
          <div nz-menu class="width-sm">
            <div nz-menu-item *ngFor="let item of allEnvironmentKeyArr" (click)="handleClick(item)">
              <i class="anticon anticon-copyright"></i>
              {{allEnvironment[item].OEMCfg.busines_name ||item}}
            </div>
          </div>
        </nz-dropdown>
      </li>
    </nz-tooltip>
  `,
})
export class DevelopmentEnvironmentCompontent {
  // 正式环境 如果是开发环境渲染dom  如果是正式版本 dom不渲染
  environment = environment;
  // 所有本地配置的环境
  allEnvironment = AllENVIRONMENTS;
  // 本地配置的key值
  allEnvironmentKeyArr = Object.keys(this.allEnvironment);

  production = environment.production;
  /**
   * 点击回调
   * @param item
   */
  handleClick(item) {
    // 设置缓存
    localStorage.setItem('environment', item);
    // 重新刷新
    location.reload();
  }
}

2）管理配置文件

import { environment } from './environment';
import { environment_ch_energy } from './environment.ch_energy';
import { environment_custom } from './environment.custom';
import { environment_changqing } from './environment.changqing';
import { environment_changyang } from './environment.changyang';
import { environment_petrochina } from './environment.petrochina';
import { environment_shenhua } from './environment.shenhua';

export const AllENVIRONMENTS = {
  'default': environment,
  'ch_energy': environment_ch_energy,
  'custom': environment_custom,
  'changqing': environment_changqing,
  'changyang': environment_changyang,
  'petrochina': environment_petrochina,
  'shenhua': environment_shenhua
};

export const DYNAMICENVIRONMENT = AllENVIRONMENTS[localStorage.getItem('environment') || 'default'];

prod文件需要导出一些变量(改个名字)

/**
 * 编译环境时 angular会处理environment路径问题  要保证helper文件中import有内容导入
 */
export const environment_ch_energy = environment;

3）main.ts引入配置

import { enableProdMode, ViewEncapsulation } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { DYNAMICENVIRONMENT } from '@env/dynamic.environment.helper';

import { preloaderFinished } from '@delon/theme';
preloaderFinished();

if (environment.production) {
  enableProdMode();
}

const bootstrap = () => {
  return platformBrowserDynamic([
    { provide: 'ConfigModel', useValue: DYNAMICENVIRONMENT }
  ]).bootstrapModule(AppModule, {
    defaultEncapsulation: ViewEncapsulation.Emulated,
    preserveWhitespaces: false,
  });
};

bootstrap().then(() => {
  if ((<any>window).appBootstrap) {
    (<any>window).appBootstrap();
  }
});

4）出不同版本的包

见.bat打包（angular）

angualr6 差异化本地环境管理。

猜你喜欢