Angular 17 SSR中自定义Provider无法传递URL查询参数问题

问题根源 #

核心问题是依赖注入标识不匹配：服务端使用字符串 'query-params' 作为 provider 标识，而组件中使用 new InjectionToken('query-params') 创建的实例，这两个在 Angular DI 系统中是完全不同的标识，导致无法匹配到正确参数值，最终注入 null。此外，客户端 hydration 阶段会重新初始化组件，服务端注入的参数不会自动同步到客户端，也需额外处理。

分步解决方案 #

1. 定义共享的 InjectionToken #

创建全局共享的 token 文件（如 src/app/tokens.ts），确保服务端和客户端使用同一 DI 标识：

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

export const QUERY_PARAMS = new InjectionToken<{ 
  email?: string; 
  name?: string; 
  lang?: string 
}>('query-params');

2. 修改服务端代码（server.ts） #

使用共享的 QUERY_PARAMS token 替换原字符串标识，并修正变量声明问题：

// 导入共享token，路径需对应实际文件位置
import { QUERY_PARAMS } from './src/app/tokens';

server.get('*', (req, res, next) => {
    const { protocol, originalUrl, baseUrl, headers } = req;
    const queryParams = req.query; // 新增const声明，避免全局变量污染
    commonEngine
      .render({
        bootstrap,
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: browserDistFolder,
        providers: [
          { provide: APP_BASE_HREF, useValue: baseUrl },
          {
            provide: QUERY_PARAMS, // 使用共享token
            useValue: queryParams
          }
        ]
      })
      .then((html) => {
        res.send(html);
      })
      .catch((err) => next(err));
  });

3. 修正组件注入逻辑 #

在 AppComponent 中使用共享 token，同时处理服务端渲染和客户端 hydration 两种场景：

import { Component, Inject, Optional, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { TranslateService } from '@ngx-translate/core';
import { DataService } from './data.service';
import { QUERY_PARAMS } from './tokens';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public queryParams: { email?: string; name?: string; lang?: string } = {};

  constructor(
    @Inject(PLATFORM_ID) private platformId: object,
    private http: HttpClient,
    private translationService: TranslateService,
    private dataService: DataService,
    @Optional() @Inject(QUERY_PARAMS) serverQueryParams: { email?: string; name?: string; lang?: string }
  ) {
    if (isPlatformBrowser(this.platformId)) {
      // 客户端从URL直接读取查询参数
      const urlParams = new URLSearchParams(window.location.search);
      this.queryParams = {
        email: urlParams.get('email') || undefined,
        name: urlParams.get('name') || undefined,
        lang: urlParams.get('lang') || undefined
      };
    } else {
      // 服务端使用注入的参数
      this.queryParams = serverQueryParams || {};
    }
    console.log(this.queryParams);
  }
}

关键注意事项 #

• DI 标识一致性：永远确保服务端和客户端使用同一个 InjectionToken 实例，不要混用字符串和 token 实例。
• 客户端 hydration 处理：Angular 17 的 hydration 会在客户端重新初始化组件，此时服务端注入的参数不会自动保留，必须从浏览器 URL 重新读取。
• 变量声明规范：服务端代码中务必使用 const/let 声明变量，避免全局变量导致的意外问题。

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