Angular 15生产构建时如何配置动态API路径？

方案1：手动添加环境配置文件 #

Angular 15默认可能没生成环境文件，但你可以手动创建：

• 在src/environments目录下创建environment.ts和environment.prod.ts
• 在environment.ts里配置本地API地址：

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:3000/api'
};

• 在environment.prod.ts里配置生产环境API地址：

export const environment = {
  production: true,
  apiBaseUrl: 'https://your-production-api.com/api'
};

• 在angular.json的configurations里添加fileReplacements，确保构建时替换对应文件：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    // 其他生产配置...
  }
}

• 构建时执行ng build --configuration production，代码里直接导入environment.apiBaseUrl使用。

方案2：动态加载静态配置文件（构建后可修改） #

这个方案适合需要在部署后调整API地址的场景：

• 在src/assets目录下创建config.json：

{
  "apiBaseUrl": "https://your-production-api.com/api"
}

• 创建一个配置服务，比如config.service.ts，在应用初始化时加载这个文件：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private config: any;

  constructor(private http: HttpClient) {}

  loadConfig() {
    return this.http.get('/assets/config.json').toPromise()
      .then(data => {
        this.config = data;
      });
  }

  getApiUrl() {
    return this.config?.apiBaseUrl;
  }
}

• 在app.module.ts的APP_INITIALIZER里注册这个服务，确保应用启动前加载配置：

import { APP_INITIALIZER } from '@angular/core';
import { ConfigService } from './config.service';

export function initializeApp(configService: ConfigService) {
  return () => configService.loadConfig();
}

@NgModule({
  // 其他模块配置...
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule { }

• 生产构建后，直接修改dist/assets/config.json里的API地址，无需重新构建。

方案3：使用环境变量注入 #

通过构建时传递环境变量，动态替换API地址：

• 安装依赖：npm install ngx-build-plus --save-dev
• 修改angular.json里的builder为ngx-build-plus:browser（生产构建）和ngx-build-plus:dev-server（本地开发）
• 创建webpack.extra.js：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_BASE_URL': JSON.stringify(process.env.API_BASE_URL || 'https://default-api.com/api')
    })
  ]
};

• 构建时传递环境变量：API_BASE_URL=https://your-production-api.com/api ng build --configuration production --extra-webpack-config webpack.extra.js
• 代码里直接使用process.env.API_BASE_URL

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