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<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    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<any> {
    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

image.png

多环境配置baseUrl

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

image.png

image.png

image.png

image.png