Angular如何基于运行时变量自定义environment.ts认证URL配置？

以下几种方式都能实现无需重新构建Angular产物，通过运行时变量判断conditionMet的需求：

1. 读取URL查询参数 #

在应用访问URL中添加自定义查询参数（比如?env=multi），运行时读取该参数值来判断分支：

function getLoginURL() {
  // 从URL查询参数中获取env值
  const urlParams = new URLSearchParams(window.location.search);
  const isMultiEnv = urlParams.get('env') === 'multi';
  
  if (isMultiEnv) {
    const subdomain = extractSubdomain(window.location.hostname);
    return `http://${subdomain}.localhost:8080/backend/login`;
  } else {
    console.log('mono');
    return "http://localhost:8080/backend/login";
  }
}

部署时只需给不同环境的访问URL添加对应参数即可，无需修改dist包内容。

2. 基于宿主域名特征判断 #

直接通过当前页面的域名特征区分环境，比如环境X的域名包含特定标识（如multi.localhost）：

function getLoginURL() {
  // 判断域名是否包含多环境标识
  const isMultiEnv = window.location.hostname.includes('multi');
  // 也可以直接判断子域名是否为指定值
  // const subdomain = extractSubdomain(window.location.hostname);
  // const isMultiEnv = subdomain === 'multi';
  
  if (isMultiEnv) {
    const subdomain = extractSubdomain(window.location.hostname);
    return `http://${subdomain}.localhost:8080/backend/login`;
  } else {
    console.log('mono');
    return "http://localhost:8080/backend/login";
  }
}

这种方式无需额外传参，依赖域名本身的区分，适合域名规划清晰的场景。

3. 加载外部静态配置文件 #

在dist目录中新增一个config.json文件，内容如下：

{
  "isMultiEnv": true
}

然后在app.module.ts中配置初始化钩子，确保应用启动前加载该配置：

// app.module.ts
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export function loadConfig(http: HttpClient) {
  return () => http.get('/config.json').toPromise().then(config => {
    (window as any).appConfig = config;
  });
}

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

最后在environment.ts中读取配置值：

function getLoginURL() {
  const isMultiEnv = (window as any).appConfig?.isMultiEnv ?? false;
  
  if (isMultiEnv) {
    const subdomain = extractSubdomain(window.location.hostname);
    return `http://${subdomain}.localhost:8080/backend/login`;
  } else {
    console.log('mono');
    return "http://localhost:8080/backend/login";
  }
}

部署时只需修改dist目录下的config.json文件，即可切换环境，完全无需触碰编译后的代码包。

4. 读取HTML meta标签 #

在index.html的<head>中添加自定义meta标签：

<meta name="app-environment" content="multi">

然后在代码中读取该标签的值：

function getLoginURL() {
  const metaTag = document.querySelector('meta[name="app-environment"]');
  const isMultiEnv = metaTag?.getAttribute('content') === 'multi';
  
  if (isMultiEnv) {
    const subdomain = extractSubdomain(window.location.hostname);
    return `http://${subdomain}.localhost:8080/backend/login`;
  } else {
    console.log('mono');
    return "http://localhost:8080/backend/login";
  }
}

部署时修改index.html中的meta标签内容即可，操作简单。

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