angular实现一次打包,多服务器运行

Angular CLI应用程序环境的局限性

1. 每种环境都需要单独的构建:构建时要求您为每个环境生成不同的配置,应用程序代码一旦更改,则需要为每个环境运行一次编译打包命令,这样既耗时又影响开发效率
2. 将应用程序配置部分存储在应用程序代码存储库中可能会带来安全风险。

问题描述: 在实际开发过程中,稍微大点的angular项目打包一次可能会耗时半个小时

解决方案: 在不重新构建Angular应用程序的情况下，将我们的Angular应用程序部署在具有不同配置的不同环境（阶段，生产，客户端A，客户端B等）中

1.在应用程序index.html文件的同一目录中创建一个新文件config.js，这将__env在浏览器窗口中提供一个特殊的（全局）变量，其中包含应用程序的环境变量。

(function (window) {



(function (window) {
  window.__env = window.__env || {};


  // 生产环境
  window.__env = {
    production: false,
    requestPath: 'http://liangjiang.zongzhipro.harzone.com:8003/zongzhi-server-final', 
  }

  // 服务器1
  /*window.__env = {
    production: true,
    requestPath: 'http://liangjiang.zongzhipro.harzone.com:8003/zongzhi-server-final', 
  }*/

  // 服务器2
  /*window.__env = {
    production: true,
    requestPath: 'http://zzzx.liangjiang.gov.cn:8002/zongzhi-server',
  }*/

}(this));

2. 在index.html中引入config.js
   

3.为了确保在运行ng build时将文件复制到输出目录，必须将其添加到angular.json应用程序构建配置的assets中：

4. 现在我们已经可以将环境变量作为__env全局window对象上的特殊属性使用，创建可以访问我们的环境变量的服务，以便可以在应用程序中的任何位置读取环境变量。

为此，我们将设置以下部分：

创建一个env.service.ts服务

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EnvService {
  //默认值
  public production = false;
  public requestPath: 'http://liangjiang.zongzhipro.harzone.com:8003/zongzhi-server-final1'; 

  constructor() {
  }
}

新建env.service.provider.ts文件,使用EnvServiceFactory类来创建实例,.
在EnvService类定义中分配给变量的值是默认值env.js，假设存在env.js且可以成功加载，则默认值将被自定义值覆盖。
如果env.js无法加载，则应用程序将退回到EnvService该类中定义的默认值

import { EnvService } from './env.service';

export const EnvServiceFactory = () => {
  // Create env
  const env = new EnvService();

  // Read environment variables from browser window
  const browserWindow = window || {};
  const browserWindowEnv = browserWindow['__env'] || {};

  // Assign environment variables from browser window to env
  // In the current implementation, properties from env.js overwrite defaults from the EnvService.
  // If needed, a deep merge can be performed here to merge properties instead of overwriting them.
  for (const key in browserWindowEnv) {
    if (browserWindowEnv.hasOwnProperty(key)) {
      env[key] = window['__env'][key];
    }
  }

  return env;
};

export const EnvServiceProvider = {
  provide: EnvService,
  useFactory: EnvServiceFactory,
  deps: [],
};

5. 导出EnvServiceProvider,在Angular的依赖项注入系统中将其列为应用程序providers数组中的提供者
   

6.使用环境变量

import { Component } from '@angular/core';  
import { EnvService } from '..env/env.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent {  
  constructor(
    private env: EnvService
  ) {
    console.log(this.env.requestPath);
  }
}

7.使用ng build --prod命令构建应用程序，env.js将出现在dist目录中：

8.编译打包后如果想要在另一个服务器环境部署,直接修改config里面的变量,刷新浏览器后,即可获取新的环境变量

参考地址:https://jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/