Angular环境变量的使用(environment)

environment是什么？

我们在用angular-cli创建angular项目时，会默认生成一个environment文件

image.png

里面会有两个文件

environment.ts

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
//在生成过程中，可以使用“fileReplacements”数组替换此文件。
//“ng build--prod”将“environment.ts”替换为“environment.prod.ts”。
//文件替换列表可以在“angular.json”中找到。
export const environment = {
  production: false,
  baseUrl:'http://dev.test.com'
};
/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
/*

*为了便于在开发模式下调试，可以导入以下文件

*忽略与区域相关的错误堆栈帧，如“zone.run”、“zoneDelegate.invokeTask”。

*这个导入应该在生产模式中被注释掉，因为它会产生负面影响

*如果抛出错误，将影响性能。

*/

//导入'zone.js/dist/zone error'；//包括在Angular CLI中。

environment.prod.ts

export const environment = {
  production: true,
  baseUrl: 'http://prod.test.com'
};

这两个文件都有一个production参数，为是否是生产环境，想到这里就一目了然，我们打包后，生效的肯定是environment.prod.ts文件配置，值为true,实际我们在本地调试时，生效的是environment.ts文件，打包后会去自动替换成environment.prod.ts，其中的baseUrl参数是我们自定义添加的url地址，针对不同环境会自动调用对应的地址，我们本地环境中调试可以调用一下这个environmentts

import {environment} from '../../environments/environment'
@Injectable()
export class InterceptorInterceptor implements HttpInterceptor {
  baseUrl = environment.baseUrl;
  constructor(private $commom: CommonService) {
    console.log(this.baseUrl);
   }

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    return next.handle(req).pipe(
      tap((event: any) => {
        if (event instanceof HttpResponseBase) this.handleData(event);
        return of(event)
      }),
      catchError((err: HttpErrorResponse) => this.handleData(err))
    )
  }

  private handleData(res: HttpResponseBase): Observable {
    console.log(res);
    if (res instanceof HttpResponse) {
      let body = (res as any).body;
      if (body.code != 200) {
        this.$commom.error(body.message);
      }
      if (body.code === 1003) {
          /**todo  =>  jump()*/
      }
    }
    if (res instanceof HttpErrorResponse) {
      this.$commom.error(res.error);
    }
    return of(res)
  }
}

启动服务后，我们请求下接口，发现默认的地址是http://dev.test.com

image.png

我们需要打包，然后再看看这个baseUrl打印的是什么，打包的时候需要输入 ng build --prod -c production

image.png

我是在express中开启了一个node服务，把刚才打的静态包丢在静态目录下就可以，访问这个包的资源
访问后我们看到的baseUrl的地址变成了http://dev.test.com
虽然前后我们并没有去改变environment.ts的路径，我们访问的一直是environment文件的baseUrl，但为什么打包后会变成environment.prod.ts文件的baseUrl呢，说明我们的打包命令 ng build --prod -c production会给我们自动切换，会自动替换environment的内容，通过查找angular.json的配置我们不难发现如下的参数配置

image.png

也就是说，当我们启动 -c production ，这条配置就生效了，很好理解的是replace替换的字段，说明者里才是核心配置，那么问题来了，我有多个环境的情况下该如何去配置环境变量嗯？

多环境配置baseUrl

多环境的情况下，我们有多个url，让其自动切换，此时假如我还有个测试环境,那就需要再建一个environment.test.ts文件

image.png

重点来了，还是在我们的angular.json文件中配置
我们需要复制一份production，然后把production改成test,再把fileReplacements中的替换地址换一下，换成是environment.test.ts，再把production改成是test

image.png

此时假如我们要发测试环境，在终端中输入 ng build --prod -c=test,也可以直接配置package.json文件， 启动npm run build

image.png

假如我们需要配置生产环境production,在终端输入 ng build --prod -c=production ,同样可以配置pabckage.json文件
我们打包测试环境看下baseUrl打印出来是什么样的,打包后的文件丢到本地express开启服务的静态目录里访问

image.png

，发现此时的地址是http://test.test.com，说明配置成功，掌握以上配置方法，自此多环境的应用切换就变得很简单了