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是生产环境文件
-
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文件。
-
angular.json文件architect:serve:configurations区段中添加staging配置
修改完成后，执行serve-staging.pngng serve--configuration=staging命令，结果输出是http://localhost:4200/staging/。 -
angular.json文件architect:build:configurations区段中添加staging配置
修改完成后，执行build-staging.pngng build --configuration=staging命令打包，生成的dist将会部署在staging对应的环境下。
就这样，按照上面的配置完成后，不用在测试代码和生产代码之间进行切换，根据需求使用命令打包。
