angular6 环境变量

参考

1. Angular 8 environments 配置

问题描述

由于Vue有根据环境变量.env文件配置，来区分production和develop，根据这个环境变量，就可以判断是否需要使用mock数据或者后台服务地址，这是一个非常有用的功能
那么，angular 是否有这个功能呢？答案是肯定的，下面做相关介绍

angular.json 配置

1. 打开 angular.json -> projects -> 项目名 -> architect -> build -> configurations -> production
   找到这个节点，然后复制，key改为 dev

2. angular.json -> projects -> 项目名 -> architect -> serve -> configurations

添加不同环境变量配置文件

1. 添加src/environments/environment.dev.ts

export const environment = {
  production: false,
  name: 'huanghailiang',
  isMock: true,
  envType: 'dev'
};			

新增的文件名dev 需要与上面的保持一致

2. 添加src/environments/environment.prod.ts

export const environment = {
  production: true,
  envType: 'pro',
  isMock: false
};

3. 添加src/environments/environment.ts

export const environment = {
  production: false,
  isMock: false
};

在typescript中，该文件是作为 import { environment } from 'src/environments/environment'; environment 的类型（class或者interface）

package.json中修改启动命令

开发环境

ng serve -c production
等价于
ng s -c=production

结果: 打印 environment.prod.ts 文件的配置内容

ng serve -c dev
等价于
ng s -c=dev

结果: 打印 environment.dev.ts 文件的配置内容

发布环境

ng build -c production
等价于
ng b -c=production

结果: 打印 environment.prod.ts 文件的配置内容

ng build -c dev
等价于
ng b -c=dev

结果: 打印 environment.dev.ts 文件的配置内容

在ts文件中使用

这里验证 app.component.ts文件

import { environment } from 'src/environments/environment';
//使用变量
console.log(environment)

不能debugger调试了

由于angular.json文件中dev这个节点是完全复制的，配置信息就是production的打包方式，为了保持develope的特性，因此，只需要复制fileReplacements一个属性值