如何将REST服务器URL及部署侧变量传入Angular应用？

下面给你几个实用的方案，都是后端开发者常用的思路：

1. 同域部署（最省心的方式） #

把Angular打包后的dist目录直接放到Spring Boot项目的src/main/resources/static（或public）目录下，启动Spring Boot后，Angular应用和REST API会共享同一个域名和端口。

这时候Angular里调用API直接用相对路径就行，比如：

this.http.get('/api/users'); // 浏览器会自动拼接当前页面的域名，比如http://localhost:8080/api/users

完全不用硬编码URL，部署到测试、生产环境都不用改前端配置，还能避免跨域问题，适合绝大多数场景。

2. 后端动态注入全局变量到index.html #

如果必须跨域部署，比如前端和后端分属不同域名，可以让Spring用模板引擎（比如Thymeleaf）动态生成Angular的index.html，把API URL嵌入到全局变量里。

步骤： #

• 把Angular的index.html改成Thymeleaf模板，在<head>里加一段脚本：

<script>
  window.apiConfig = {
    baseUrl: [[${apiBaseUrl}]] // 这里用Thymeleaf语法替换成Spring里的配置值
  };
</script>

• Spring控制器返回这个模板时，传入apiBaseUrl参数（可以从配置文件application.yml里读取）：

@GetMapping("/")
public String index(Model model) {
  String apiUrl = environment.getProperty("api.base-url");
  model.addAttribute("apiBaseUrl", apiUrl);
  return "index";
}

• Angular里创建一个服务读取全局变量：

@Injectable({ providedIn: 'root' })
export class ApiConfigService {
  get baseUrl(): string {
    return (window as any).apiConfig.baseUrl;
  }
}

之后所有HTTP请求都通过这个服务获取URL：

this.http.get(`${this.apiConfig.baseUrl}/api/users`);

3. 部署时替换Angular环境变量 #

Angular自带环境配置文件src/environments/environment.prod.ts，可以先在里面留占位符，部署时用脚本替换成实际的API URL。

步骤： #

• 在environment.prod.ts里写占位符：

export const environment = {
  production: true,
  apiBaseUrl: '__API_BASE_URL__'
};

• Angular打包后，用sed（Linux/macOS）或者PowerShell脚本替换打包文件里的占位符：

# Linux/macOS示例，替换dist目录下所有JS文件里的占位符
sed -i 's/__API_BASE_URL__/https://your-spring-api-domain.com/g' dist/your-app/**/*.js

• Angular里直接用环境变量：

import { environment } from '../environments/environment';

this.http.get(`${environment.apiBaseUrl}/api/users`);

4. 启动前加载后端配置 #

让Angular在启动时先请求Spring的一个配置接口，获取API URL等参数，再初始化应用。

步骤： #

• Spring提供一个配置接口：

@GetMapping("/api/config")
public Map<String, String> getConfig() {
  Map<String, String> config = new HashMap<>();
  config.put("apiBaseUrl", environment.getProperty("api.base-url"));
  return config;
}

• Angular创建配置服务，实现加载逻辑：

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

  constructor(private http: HttpClient) {}

  loadConfig(): Promise<void> {
    return this.http.get('/api/config')
      .toPromise()
      .then(data => {
        this.config = data;
      });
  }

  get apiBaseUrl(): string {
    return this.config.apiBaseUrl;
  }
}

• 在app.module.ts里配置APP_INITIALIZER，确保应用启动前加载完配置：

import { APP_INITIALIZER } from '@angular/core';

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

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule {}

之后就可以在组件/服务里注入ConfigService获取API URL了。

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