Angular 项目多环境配置-开发、测试、产品环境配置分离

项目多环境配置

1. 方案一：利用angular cli 打包时处理，不同的环境打出不同的包文件
2. 方案二：外置配置文件，方便线上修改，不需要每次修改都打包文件

方案一：开发时配置

angular cli 创建项目后会自动生成两个环境配置文件：

src/environments目录下会生成两个环境配置文件
#environment.ts 代表开发时使用的环境
默认内容如下
export const environment = {
  production: false,
};
#environment.prod.ts 代表产品上线时使用的环境
默认内容如下
export const environment = {
  production: false,
};

原理是，cli build或者server时，根据名词参数--env=环境配置文件简称切换配置文件
而环境配置文件的简称在.angular-cli.json文件中声明，具体如下

如果你想增加其他环境配置，只需修改这里即可。

如何使用

修改下配置文件，然后看使用效果
修改environment.ts

export const environment = {
 production: false,
 testurl:"我是开发环境"
};


修改environment.prod.ts
export const environment = {
 production: true,
 testurl:"我是生成环境"
};

# 然后在根组件app.component.ts中引用一下环境配置文件
1. 导入环境
import {environment} from "../environments/environment";
2. 然后调用
ngOnInit() {
   alert(JSON.stringify(environment));
}
运行命令
ng serve 页面会弹出 {production: true, testurl:"我是生成环境"}
ng serve --env=prod 页面会弹出 {production: true, testurl:"我是产品环境"}
3. 这里注意有个默认值，cli命令的默认值是 dev ，代码中默认使用 imporet的文件，
你会发现我们import的是environment.dev，但是这里import什么版本其实不重要，
因为@Angular/cli会在编译时根据你给的--env参数自己动态替换。
当然，如果你不给--env参数，它就默认使用这里import的版本了

方案二：线上可配置

有时候build大包好了代码，放到服务器上，当服务器ip变更后，只要简单修改配置文件，便可完成环境配置。

在 src/assets文件增加一个配置文件，比如conf.json,把所有的配置写到这个文件，然后在页面使用时，动态加载这个文件。

-- 示例代码
this.httpClient.get('/conf.json').subscribe(data=>{
//todo 拿到了配置文件
});

下次需要修改文件，服务器上改conf.json即可。