Angular 17 SSR服务端如何获取Query Params？

问题原因 #

你的原有方案在Angular 17中失效，核心原因是Angular 17默认采用独立组件架构，SSR的注入器上下文与Angular 16的模块式架构不同，自定义字符串令牌（'queryParams'）无法被正确传递到应用注入器中。此外，Angular官方推荐使用内置的REQUEST令牌来获取服务端请求对象，而非自定义注入。

正确实现步骤 #

1. 修改服务，改用内置REQUEST令牌获取Query Params

更新xy.service.ts，利用Angular平台服务器提供的REQUEST令牌在服务端获取请求参数，再通过TransferState传递到浏览器端：

import { Inject, Injectable, PLATFORM_ID, Optional } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { REQUEST } from '@angular/platform-server';

const QUERY_PARAMS_STATE_KEY = makeStateKey<any>('queryParams');

@Injectable({ providedIn: 'root' })
export class XyService {
  queryParams: Record<string, string | string[]> = {};

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private transferState: TransferState,
    @Optional() @Inject(REQUEST) private request: any
  ) {
    this.initQueryParams();
  }

  private initQueryParams(): void {
    if (isPlatformServer(this.platformId)) {
      // 从服务端请求对象中提取Query Params
      this.queryParams = this.request?.query || {};
      // 将参数存入TransferState，传递到浏览器
      this.transferState.set(QUERY_PARAMS_STATE_KEY, this.queryParams);
    } else if (isPlatformBrowser(this.platformId)) {
      // 从TransferState中读取服务端传递的参数
      this.queryParams = this.transferState.get(QUERY_PARAMS_STATE_KEY, {});
      // 可选：如果支持客户端路由跳转，可补充从当前URL获取参数
      // const url = new URL(window.location.href);
      // this.queryParams = Object.fromEntries(url.searchParams.entries());
    }
  }

  // 初始化时执行POST请求的方法
  initPostRequest(): Promise<any> {
    // 替换为你的实际POST请求逻辑，使用this.queryParams作为参数
    // 示例：return this.http.post('/api/init', this.queryParams).toPromise();
    return Promise.resolve();
  }
}

2. 配置server.ts，提供REQUEST令牌

在server.ts的commonEngine.render配置中，添加REQUEST令牌的注入，确保服务端能获取到请求对象：

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

// ... 其他代码

commonEngine
  .render({
    bootstrap,
    documentFilePath: indexHtml,
    url: `${protocol}://${headers.host}${originalUrl}`,
    publicPath: browserDistFolder,
    providers: [
      { provide: APP_BASE_HREF, useValue: baseUrl },
      { provide: REQUEST, useValue: req } // 新增此行
    ],
  })
  .then((html) => res.send(html))
  .catch((err) => next(err));

3. 配置应用初始化钩子，触发POST请求

在app.config.ts中，通过APP_INITIALIZER注册初始化逻辑，确保应用启动时自动执行POST请求：

import { ApplicationConfig, APP_INITIALIZER } from '@angular/core';
import { provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { XyService } from './xy.service';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(withFetch()),
    {
      provide: APP_INITIALIZER,
      useFactory: (xyService: XyService) => () => xyService.initPostRequest(),
      deps: [XyService],
      multi: true
    }
  ]
};

验证注意事项 #

• 必须使用SSR模式运行：执行npm run build && npm run serve:ssr，ng serve不会启动SSR服务，无法触发服务端逻辑。
• 确保@angular/platform-server已安装（Angular 17初始化SSR项目时默认包含）。

内容的提问来源于stack exchange，提问作者Bendegűz Góczi