Angular 19 SSR使用yarn serve:ssr时无法获取Query params问题

一、两种模式的核心差异 #

• ng serve（开发SSR模式）：开发服务器处理请求时，路由解析流程提前完成，根组件的ngOnInit执行时，ActivatedRoute的参数已完全就绪。即使禁用JS，服务器端渲染的内容也能正确包含查询参数值。
• 生产SSR模式（ng build && serve:ssr）：生产构建后的应用做了初始化流程优化，根组件的ngOnInit钩子执行时机早于路由参数解析完成。此时订阅queryParams的异步流在服务器端不会触发，导致无法获取参数。

二、Angular 19 SSR获取查询参数的推荐方案 #

方案1：用ActivatedRouteSnapshot同步读取 #

直接通过路由快照获取参数，是最简洁的跨端方案，服务器端和客户端都能生效：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit {
  title = 'dummyapp';

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 同步获取快照中的查询参数，服务器端渲染时直接可用
    this.title = this.route.snapshot.queryParams['title'] || this.title;
  }
}

快照是当前路由状态的静态副本，初始化阶段就能拿到完整参数，不需要依赖异步订阅。

方案2：服务器端直接读取请求对象 #

如果需要在更早的阶段（比如应用初始化钩子）获取参数，可以通过REQUEST令牌直接读取Express请求对象的查询参数：

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

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit {
  title = 'dummyapp';

  constructor(
    private route: ActivatedRoute,
    @Inject(REQUEST) private request: Request,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  ngOnInit(): void {
    if (isPlatformServer(this.platformId)) {
      // 服务器端直接从请求对象提取参数
      const serverTitle = this.request.query.title;
      if (serverTitle) {
        this.title = serverTitle as string;
      }
    } else {
      // 客户端 fallback 到路由快照
      this.title = this.route.snapshot.queryParams['title'] || this.title;
    }
  }
}

这种方式适合需要在服务器端做预数据加载的场景，注意要通过isPlatformServer区分环境，避免客户端运行时出现注入错误。

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