Angular学习笔记：environment.ts文件

本文是自己的学习笔记，主要参考资料如下。

- B站《Angular全套实战教程》，达内官方账号制作，https://www.bilibili.com/video/BV1i741157Fj?https://www.bilibili.com/video/BV1R54y1J75g/?p=32&vd_source=ab2511a81f5c634b6416d4cc1067809f。

---

1、environment文件

1.1、简介

项目创建时会自动创建environmet文件夹，其中包含environment.ts和environment.prod.ts两个文件。

系统在不同的环境会有不同的参数，比如开发环境的服务器地址和生产环境的服务器地址肯定不是同一个。

angular给我们提供了方便，属于生产环境的参数就定义在environment.prod.ts中，属于普通环境的就定义在environment.ts中。

当然我们可以根据自己的需要添加多个文件，毕竟环境可能不止一个。

1.2、配置

我们需要配置特定环境使用指定的文件读取参数，这里的配置是在angular.json文件中。

下面的配置项目的默认配置，表示当项目以profile=production启动时，环境配置文件会用environment.prod.ts替代environment.ts。

项目以profile=development启动时则不替代环境配置文件，默认使用environment.ts中的参数。

默认是以producetion为profile启动项目。

"configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "outputHashing": "all"
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  },
  "defaultConfiguration": "production"
}
          

1.3、使用环境变量

我们只需要在ts文件中直接````import environment.ts```就可使用环境变量，下面是示例。

这是environment.ts和enviornment.prod.ts的内容。

// environment.ts
export const environment = {
  production: false,
  profile: 'development'
};

// environment.prod.ts
export const environment = {
  production: true,
  profile: 'production'
};

这是使用示例，import environment后就能直接用到环境参数。

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

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

  profile = environment.profile;
}

然后打印出profile参数，以不同的profile启动项目查看环境变量的变化。

<h1>profile = {profile}</h1>

• 以development启动。ng serve --configuration=development

• 以production启动。ng serve --configuration=production