即使禁用 RenderMode.Server 和 SSG，Angular 19 REQUEST 也是“null”（在服务器运行时）

Question

在 Angular 19 中，有一种从 Angular 应用程序范围访问 Request 对象的新方法，这在 Angular 18 中不可用。

根据 docs，如果您遇到以下任何情况，预计会

null

：

• 在构建过程中。
• 当应用程序在浏览器中渲染时（客户端渲染）。
• 执行静态站点生成 (SSG) 时。
• 开发中的路线提取期间（在请求时）。

我确保通过默认设置中的以下更改来禁用 SSG

angular.json

：

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

并且我确保

renderMode

不会在

app.routes.server.ts

中预渲染：

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: '**',
    renderMode: RenderMode.Server
  }
];

DI 的两种方法仍然返回

null

为

REQUEST

:

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
  }
}

Answer 1

该脚本同时在您的浏览器和服务器上运行，但这并不意味着您的

req

变量会由浏览器中的 Angular 自动填充。您需要显式传输它（使用 Angular TransferState API）。

以下是从浏览器访问

REQUEST

令牌的代码片段，以帮助您入门：

import { Component, inject, makeStateKey, REQUEST, TransferState } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {

  private readonly transferState: TransferState = inject(TransferState);
  private readonly req = inject(REQUEST, { optional: true });
  private readonly REQ_URL = makeStateKey<any>('reqUrl');
  private transferedUrl:string | undefined;

  constructor() {

    if (this.req) {
      console.log('[Server] received request', this.req.url);
      this.transferState.set(this.REQ_URL, this.req.url);
    } else {
      // This is executed on the browser only (or during the build process)
      console.log('[Browser] Request object not available, getting it from server cache..');
      this.transferedUrl = this.transferState.get(this.REQ_URL, null);
      console.log('[Browser] Retrived request url is', this.transferedUrl);
    }

  }
}