Angular 17 SSR注入Request/Response对象报错的解决方案咨询

Angular 17已经弃用了@nguniversal/express-engine，改用@angular/ssr包实现服务端渲染，原来的注入令牌自然无法使用。要解决浏览器环境下的NullInjectorError，核心思路是根据运行环境（服务端/浏览器）提供不同的Request/Response实现，避免在浏览器端注入不存在的服务端对象。

步骤1：自定义注入令牌 #

首先需要自己定义Request和Response的注入令牌，替代原@nguniversal提供的令牌：

// app.config.ts
import { InjectionToken } from '@angular/core';

export const REQUEST = new InjectionToken<Request>('REQUEST');
export const RESPONSE = new InjectionToken<Response>('RESPONSE');

步骤2：配置环境感知的提供者 #

在应用配置中，通过useFactory结合PLATFORM_ID判断运行环境，分别提供真实的服务端对象或浏览器端的兼容实现：

// app.config.ts
import { ApplicationConfig, PLATFORM_ID, inject } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { provideServerRendering } from '@angular/ssr';
import { routes } from './app.routes';
import { REQUEST, RESPONSE } from './tokens';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideServerRendering(), // Angular 17 SSR必备配置
    // 配置REQUEST提供者
    {
      provide: REQUEST,
      useFactory: () => {
        const platformId = inject(PLATFORM_ID);
        if (isPlatformServer(platformId)) {
          return inject('REQUEST'); // 服务端从express请求获取
        } else {
          // 浏览器端返回模拟Request对象或null
          return new Request(window.location.href);
        }
      }
    },
    // 配置RESPONSE提供者
    {
      provide: RESPONSE,
      useFactory: () => {
        const platformId = inject(PLATFORM_ID);
        if (isPlatformServer(platformId)) {
          return inject('RESPONSE'); // 服务端从express响应获取
        } else {
          // 浏览器端模拟Response的redirect方法
          return {
            redirect: (url: string) => {
              window.location.href = url;
            }
          } as unknown as Response;
        }
      }
    }
  ]
};

步骤3：在Server.ts中传递Express对象 #

修改server.ts，将express的req和res注入到Angular的DI容器中，确保服务端能获取到真实的请求响应对象：

// server.ts
import { APP_BASE_HREF } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { REQUEST, RESPONSE } from './app/tokens';

// ... 其他server.ts代码

server.get('*', (req, res) => {
  bootstrapApplication(AppComponent, {
    ...appConfig,
    providers: [
      { provide: APP_BASE_HREF, useValue: req.baseUrl },
      { provide: REQUEST, useValue: req },
      { provide: RESPONSE, useValue: res }
    ]
  }).then(app => app.render())
    .catch(err => console.error(err));
});

步骤4：封装RedirectService（统一重定向逻辑） #

将重定向逻辑封装在Service中，组件无需关心运行环境：

// redirect.service.ts
import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { RESPONSE } from './tokens';

@Injectable({ providedIn: 'root' })
export class RedirectService {
  constructor(
    @Inject(PLATFORM_ID) private platformId: object,
    @Inject(RESPONSE) private response: Response
  ) {}

  redirect(url: string): void {
    if (isPlatformServer(this.platformId)) {
      this.response.redirect(url);
      // 可选：终止请求（根据业务需求）
      // this.response.end();
    } else {
      window.location.href = url;
    }
  }
}

关键注意事项 #

• 不要直接在组件中注入Request/Response，尽量通过Service封装，保持组件的环境无关性。
• 浏览器端的Response模拟实现只需覆盖业务用到的方法（比如redirect），无需完全实现所有Response接口。
• 确保provideServerRendering()在应用配置的providers中，这是Angular 17启用SSR的必要配置。

内容的提问来源于stack exchange，提问作者Jinu Joseph Daniel