如何在Angular中获取Azure Application settings

首先说常见错误做法：不要在构建阶段把Azure配置写死到src/environments下的environment文件里，这种方式每次修改Azure应用设置都要重新编译、重新部署Angular项目，完全用不到Azure配置动态生效的能力，正确的做法是运行时加载配置，具体实现步骤如下：

• 第一步：创建静态配置占位文件
  在Angular项目的src/assets目录下新建app-config.json，写入配置的结构占位，部署时这个文件会被实际配置替换：

  {
    "apiBaseUrl": "",
    "appInsightsKey": "",
    "publicFeatureFlag": false
  }
  

  这个文件放在assets目录下会被Angular构建工具自动复制到输出目录，不需要额外修改构建配置。
• 第二步：实现应用启动前的配置加载逻辑
  借助Angular内置的APP_INITIALIZER令牌，保证配置在应用正式启动、组件渲染前就加载完成，避免出现时序问题：
  1. 先写配置读写服务：

  // app-config.service.ts
  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  export interface AppConfig {
    apiBaseUrl: string;
    appInsightsKey: string;
    publicFeatureFlag: boolean;
  }
  
  @Injectable({ providedIn: 'root' })
  export class AppConfigService {
    private config: AppConfig | null = null;
    constructor(private http: HttpClient) {}
  
    load(): Promise<void> {
      return this.http.get<AppConfig>('/assets/app-config.json')
        .toPromise()
        .then(res => {
          this.config = res;
        });
    }
  
    get(): AppConfig {
      if (!this.config) throw new Error('配置加载失败，请检查初始化流程');
      return this.config;
    }
  }
  

  2. 在根模块注册初始化逻辑：

  // app.module.ts
  import { NgModule, APP_INITIALIZER } from '@angular/core';
  import { HttpClientModule } from '@angular/common/http';
  import { AppConfigService } from './app-config.service';
  
  export function initConfig(configService: AppConfigService) {
    return () => configService.load();
  }
  
  @NgModule({
    imports: [HttpClientModule],
    providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: initConfig,
        deps: [AppConfigService],
        multi: true
      }
    ]
  })
  export class AppModule {}
  

• 第三步：Azure侧配置对接

  重要提醒：Angular编译后是运行在用户浏览器的静态资源，所有前端可读取的配置用户都能通过开发者工具拿到，绝对不要把数据库连接串、服务密钥这类敏感信息放在前端配置里，敏感配置只能由后端服务读取Azure Application Settings后使用。
  根据你部署的Azure服务类型选择对接方式：

  • 如果部署到Azure App Service：在门户「配置-应用程序设置」里添加对应键值对，配置部署后脚本，在应用启动前将当前环境的应用设置值写入站点目录下的/assets/app-config.json即可，修改配置后重启应用就能生效，不需要重新构建部署前端代码。
  • 如果部署到Azure Static Web Apps：写一个读取应用设置的Azure Function接口，在staticwebapp.config.json里配置路由规则，将/assets/app-config.json的请求转发到这个接口，接口直接返回拼接好的配置JSON即可，修改配置后即时生效。
• 第四步：业务代码中使用配置
  直接注入配置服务调用get方法即可，不需要担心时序问题：

  @Injectable({ providedIn: 'root' })
  export class UserService {
    private apiBase = this.config.get().apiBaseUrl;
    constructor(private http: HttpClient, private config: AppConfigService) {}
  
    getUserList() {
      return this.http.get(`${this.apiBase}/users`);
    }
  }
  

内容的提问来源于stack exchange，提问作者Cristhian