Angular 19服务器运行时REQUEST为null问题（已禁用SSG）

Angular 19新增了从应用作用域访问Request对象的能力，这在Angular 18中不支持。根据官方文档，以下场景REQUEST会返回null：

• 构建过程中
• 浏览器端渲染（客户端渲染）时
• 执行静态站点生成（SSG）时
• 开发环境下的路由提取阶段（请求发生时）

已做如下配置：

1. 修改angular.json禁用SSG：

"architect": {
    "build": {
        "options": {
            "prerender": false,

2. 在app.routes.server.ts设置渲染模式为Server：

import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
  {
    path: '**',
    renderMode: RenderMode.Server
  }
];

但两种依赖注入方式获取的REQUEST均为null：

import { Component, inject, Inject, REQUEST } from '@angular/core';
//...
export class AppComponent {
  // constructor(@Inject(REQUEST) public req: Request) {
  //   console.log('req', this.req); //null
  // }
  constructor() {
    const req = inject(REQUEST);
    console.log('req', req); // null
  }
}

请问为何在服务器运行时REQUEST仍为null？

1. 组件在客户端 hydration 阶段被重复实例化 #

Angular混合渲染模式下，即使设置了Server渲染，组件也会在客户端 hydration（水合）阶段再次实例化。此时客户端环境中REQUEST必然为null，你看到的null日志可能来自客户端而非服务器。

验证&解决：添加环境标识区分服务器/客户端日志：

import { Component, inject, Inject, REQUEST, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';

export class AppComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: object) {
    if (isPlatformServer(this.platformId)) {
      const req = inject(REQUEST);
      console.log('[SERVER] req:', req);
    } else {
      console.log('[CLIENT] REQUEST is null (expected)');
    }
  }
}

2. 服务器端未正确传递请求上下文 #

如果使用自定义服务器（如Express），需确保在渲染时将请求对象传递给Angular的平台提供者。检查server.ts中的配置：

import { renderApplication } from '@angular/platform-server';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { Request } from 'express';

export default async function handler(req: Request, res: any) {
  const html = await renderApplication(AppServerModule, {
    document: '<app-root></app-root>',
    url: req.originalUrl,
    platformProviders: [
      { provide: APP_BASE_HREF, useValue: req.baseUrl },
      { provide: REQUEST, useValue: req } // 必须显式传递请求对象
    ]
  });
  res.send(html);
}

若使用Angular官方默认服务器，确认server.ts中已正确配置REQUEST的传递逻辑。

3. 组件初始化时机早于请求上下文建立 #

如果组件在应用初始化阶段（如APP_INITIALIZER触发时）被实例化，此时请求上下文尚未建立，会导致REQUEST为null。

解决：延迟到组件激活阶段获取REQUEST：

import { Component, inject, REQUEST, PLATFORM_ID, OnInit } from '@angular/core';
import { isPlatformServer } from '@angular/common';

export class AppComponent implements OnInit {
  constructor(@Inject(PLATFORM_ID) private platformId: object) {}

  ngOnInit() {
    if (isPlatformServer(this.platformId)) {
      const req = inject(REQUEST);
      console.log('[SERVER] req in ngOnInit:', req);
    }
  }
}

4. 开发环境路由提取阶段的干扰 #

开发环境下，Angular启动时会执行路由提取操作，这个阶段REQUEST会返回null。你看到的null日志可能来自这个初始化阶段，而非实际请求处理流程。

验证：构建生产环境包并运行，查看日志是否正常：

ng build --prod
node dist/your-project-name/server/server.mjs

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