Angular实战-多环境配置

Don't worry about making mistakes, the biggest mistake is you don't have the experience of practice.
不要担心犯错误，最大的错误就是自己没有实践的经验。

最近，我犯了一个错误：没有注释掉测试代码，然后直接打包部署到生产环境上去。
一直的状态：开发后台接口有两个地址：测试地址和生产地址。用其中一个时，就注释掉另外的一个，就这样终于出错了，部署的时候忘记注释了。
解决方案：使用配置文件environment.ts文件存储特定环境的特定值。

项目使用的Angular版本是V6.0.3, 具体用法如下：

配置针对特定环境的默认值

在项目的src/environments目录下提供了两个文件，environment.ts时默认环境， environment.prod.ts是生产环境文件

配置文件.png

• environments.ts文件

export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200/test/',
};

• environments.prod.ts文件

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

在app.component.ts文件中引用baseUrl的值，代码如下：

import {Component} from '@angular/core';
import {environment} from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  baseUrl = '';

  constructor() {
    this.baseUrl = environment.baseUrl;
    console.log(this.baseUrl);
  }
}

• 执行ng serve命令，结果输出是 http://localhost:4200/test/
• 执行ng serve --prod命令，结果输出是 http://www.lg.com/prod/api/

同样的使用ng build命令生成的dist包，是将部署在默认环境（测试环境）下，使用ng build --prod命令生成的dist包，是将部署在生产环境下。

创建新的配置文件

当然也可以创建一个新的环境配置文件来作为测试环境的配置，在这里暂且起名为environment.staging.ts,代码如下：

export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200/staging/',
};

其次为了environment.staging.ts文件能够在项目中起作用，我们需要修改angular.json文件。

1. angular.json文件architect:serve:configurations区段中添加staging配置
   

   serve-staging.png
   修改完成后，执行ng serve--configuration=staging命令，结果输出是http://localhost:4200/staging/。

2. angular.json文件architect:build:configurations区段中添加staging配置
   

   build-staging.png
   修改完成后，执行ng build --configuration=staging命令打包，生成的dist将会部署在staging对应的环境下。

就这样，按照上面的配置完成后，不用在测试代码和生产代码之间进行切换，根据需求使用命令打包。