非Angular CLI的Angular 2客户端多环境基础API地址配置方法

我来分享几个适合你这种Dotnet+Webpack搭配Angular 2项目的多环境API地址配置方案，都是实际项目里用过的，应该能解决子目录下API路径指向错误的问题：

方案1：Webpack环境变量注入 #

利用Webpack的DefinePlugin根据不同环境注入全局API地址变量，结合Dotnet的环境变量传递实现多环境切换：

1. 配置Webpack注入全局变量
   在你的Webpack配置文件中添加以下代码：

const webpack = require('webpack');
// 从环境变量获取当前环境，默认development
const currentEnv = process.env.NODE_ENV || 'development';

// 定义各环境的API基础地址
const apiConfigs = {
  development: 'http://localhost:5000/api',
  staging: 'http://devserver/myapp/api',
  production: 'http://prodserver/myapp/api'
};

module.exports = {
  // 其他Webpack配置...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_BASE_URL': JSON.stringify(apiConfigs[currentEnv])
    })
  ]
};

2. 在Angular服务中使用全局变量

@Injectable()
export class ApiService {
  private baseUrl = process.env.API_BASE_URL;

  constructor(private http: HttpClient) {}

  fetchData() {
    return this.http.get(`${this.baseUrl}/your-endpoint`);
  }
}

3. Dotnet侧传递环境变量
   开发时执行：set NODE_ENV=development && dotnet run
   部署到测试服务器时，设置环境变量NODE_ENV=staging，让Webpack构建时自动注入对应地址。

方案2：基于Dotnet配置体系统一管理 #

利用Dotnet原生的多环境配置文件（appsettings.*.json），将API地址传递给Angular，实现前后端配置统一：

1. 添加多环境配置
   在appsettings.Development.json中：

{
  "ApiSettings": {
    "BaseUrl": "http://localhost:5000/api"
  }
}

在appsettings.Staging.json中：

{
  "ApiSettings": {
    "BaseUrl": "http://devserver/myapp/api"
  }
}

2. Dotnet侧读取并注入到页面
   首先定义配置映射类：

public class ApiSettings
{
    public string BaseUrl { get; set; }
}

在Startup.cs中配置服务：

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<ApiSettings>(Configuration.GetSection("ApiSettings"));
    // 其他服务配置...
}

然后在布局页（如_Layout.cshtml）中注入全局变量：

<script>
  window.appConfigs = {
    apiBaseUrl: '@Configuration["ApiSettings:BaseUrl"]'
  };
</script>

3. Angular侧读取全局变量

@Injectable()
export class ApiService {
  private baseUrl = (window as any).appConfigs.apiBaseUrl;

  constructor(private http: HttpClient) {}
  // API请求方法...
}

方案3：动态加载配置文件（无需重新构建） #

如果不想每次切换环境都重新构建Angular代码，可以用APP_INITIALIZER在Angular启动时动态加载对应环境的配置文件：

1. 在wwwroot下创建多环境配置文件
   在wwwroot/config目录下创建：

• config.development.json
• config.staging.json
• config.production.json

以测试环境为例，config.staging.json内容：

{
  "apiBaseUrl": "http://devserver/myapp/api"
}

2. 创建配置服务并初始化加载

@Injectable()
export class ConfigService {
  private configData: any;

  constructor(private http: HttpClient) {}

  loadConfig(): Promise<any> {
    const env = process.env.NODE_ENV || 'development';
    return this.http.get(`/config/config.${env}.json`)
      .toPromise()
      .then(data => {
        this.configData = data;
      });
  }

  getApiBaseUrl(): string {
    return this.configData.apiBaseUrl;
  }
}

3. 在AppModule中配置初始化器

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

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

4. 在API服务中使用配置

@Injectable()
export class ApiService {
  private baseUrl: string;

  constructor(private http: HttpClient, private configService: ConfigService) {
    this.baseUrl = configService.getApiBaseUrl();
  }
  // API请求方法...
}

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