Angular 17 SSR模式下如何获取主机名适配多托管主题

针对你在Angular 17 SSR + Firebase多托管实例场景下，需要获取主机名加载对应主题的问题，下面是可行的解决步骤：

问题根源 #

你之前尝试的DOCUMENT和PlatformLocation仅在客户端环境有效，服务端渲染时无法访问浏览器DOM对象，必须通过请求对象获取主机名。而之前注入REQUEST失败，是因为server.ts里的令牌配置有误。

正确配置步骤 #

1. 修正server.ts中的请求令牌注入 #

首先从@angular/platform-server导入REQUEST和RESPONSE，然后在commonEngine.render的providers中正确传递请求对象：

import { REQUEST, RESPONSE } from '@angular/platform-server';

// ... 其他代码

commonEngine
  .render({
    bootstrap: AppServerModule,
    documentFilePath: indexHtml,
    url: `${protocol}://${headers.host}${originalUrl}`,
    publicPath: browserDistFolder,
    providers: [
      { provide: APP_BASE_HREF, useValue: baseUrl },
      // 正确注入REQUEST和RESPONSE对象
      { provide: REQUEST, useValue: req },
      { provide: RESPONSE, useValue: res }
    ],
  })
  .then((html) => res.send(html))
  .catch((err) => next(err));

2. 在组件/服务中注入并使用REQUEST #

在需要获取主机名的组件或服务中，注入REQUEST并结合PLATFORM_ID判断当前环境（服务端/客户端）：

import { Component, Inject, Optional, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { REQUEST } from '@angular/platform-server';
import { Request } from 'express';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  hostname: string;

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Optional() @Inject(REQUEST) private readonly request: Request
  ) {
    this.hostname = this.getHostname();
    // 这里可以用hostname查询数据库，加载对应主题配置
    this.loadTheme(this.hostname);
  }

  getHostname(): string {
    if (isPlatformServer(this.platformId)) {
      // 服务端从请求头获取主机名
      return this.request.headers.host;
    } else {
      // 客户端从window.location获取
      return window.location.host;
    }
  }

  loadTheme(hostname: string): void {
    // 根据hostname加载对应主题逻辑
    if (hostname === 'test1.com') {
      // 加载蓝/绿主题配置
    } else if (hostname === 'test2.com') {
      // 加载黄/红主题配置
    }
  }
}

3. Firebase托管注意事项 #

Firebase托管默认会保留请求的host头，无需额外配置即可在服务端通过request.headers.host获取到正确的托管实例域名。

关键说明 #

• @Optional()装饰器必须添加，因为客户端环境不存在REQUEST对象，避免注入报错
• 必须通过isPlatformServer区分环境，确保服务端和客户端都能正确获取主机名
• 不要使用字符串令牌（如'REQUEST'），而是使用@angular/platform-server导出的REQUEST令牌，避免令牌不匹配导致注入失败

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