面试题：Angular生产版本构建时如何配置基础环境变量

Question

在Angular项目中，要进行生产版本的构建，假设你需要配置API服务器的地址作为环境变量，简述在Angular中配置环境变量的一般步骤，以及如何在组件中获取该环境变量。

Answer 1

配置环境变量步骤

1. 在 src/environments 目录下，有两个文件 environment.ts 和 environment.prod.ts 。environment.ts 用于开发环境，environment.prod.ts 用于生产环境。
2. 在这两个文件中定义环境变量，例如要配置 API 服务器地址，可以这样写：

   // environment.ts
   export const environment = {
     production: false,
     apiUrl: 'http://localhost:3000/api'
   };
   
   // environment.prod.ts
   export const environment = {
     production: true,
     apiUrl: 'https://your-production-server.com/api'
   };
   

3. 在构建项目时，Angular CLI 会根据 --prod 标志自动选择对应的环境文件。比如 ng build --prod 会使用 environment.prod.ts 。

在组件中获取环境变量

1. 首先在组件中导入 environment 对象。例如在组件的 .ts 文件头部导入：

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

2. 然后在组件类中就可以使用这个环境变量了，例如：

   @Component({
     selector: 'app-example',
     templateUrl: './example.component.html',
     styleUrls: ['./example.component.css']
   })
   export class ExampleComponent {
     apiServerUrl = environment.apiUrl;
     constructor() {}
   }
   

这样在组件的模板或逻辑中就可以使用 apiServerUrl 来访问配置的 API 服务器地址。