Angular SSR启动报错NullInjectorError：REQUEST无提供者求助

错误信息 #

ERROR Error [NullInjectorError]: StaticInjectorError(AppServerModule)[REQUEST]: 
  StaticInjectorError(Platform: core)[REQUEST]:
    NullInjectorError: No provider for REQUEST!
    at NullInjector.get (C:\Users\---\-----\dist\server\main.js:18902:29)
    at resolveToken (C:\Users\---\-----\dist\server\main.js:30060:28)
    at tryResolveToken (C:\Users\---\-----\dist\server\main.js:30004:20)
    at StaticInjector.get (C:\Users\---\-----\dist\server\main.js:29906:24)
    at resolveToken (C:\Users\---\-----\dist\server\main.js:30060:28)
    at tryResolveToken (C:\Users\---\-----\dist\server\main.js:30004:20)
    at StaticInjector.get (C:\Users\---\-----\dist\server\main.js:29906:24)
    at resolveNgModuleDep (C:\Users\---\-----\dist\server\main.js:38371:33)
    at _createClass (C:\Users\---\-----\dist\server\main.js:38420:72)
    at _createProviderInstance (C:\Users\---\-----\dist\server\main.js:38388:30) {
  ngTempTokenPath: null,
  ngTokenPath: [ 'REQUEST' ]
}

我的app.server.module.ts代码 #

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ServerCookiesModule } from 'ngx-universal-cookies/server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { UniversalInterceptor } from './universal.interceptor';
import { AuthenticationServerModule } from './authentication/authentication.server.module';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule,
    ServerCookiesModule.forRoot(),
    AuthenticationServerModule
  ],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UniversalInterceptor,
      multi: true,
    },
  ],
})
export class AppServerModule {}

解决方案 #

这个错误是因为SSR应用中使用了REQUEST令牌，但未在服务端模块中提供对应依赖。REQUEST是Angular Universal提供的服务端请求对象令牌，需按以下步骤配置：

1. 补充导入与提供者配置

在app.server.module.ts中添加REQUEST相关导入和提供者：

import { NgModule } from '@angular/core';
import { ServerModule, provideServerRendering } from '@angular/platform-server';
import { ServerCookiesModule } from 'ngx-universal-cookies/server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { UniversalInterceptor } from './universal.interceptor';
import { AuthenticationServerModule } from './authentication/authentication.server.module';
// 新增REQUEST导入
import { REQUEST, RESPONSE } from '@nguniversal/common';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule,
    ServerCookiesModule.forRoot(),
    AuthenticationServerModule
  ],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UniversalInterceptor,
      multi: true,
    },
    // 新增REQUEST和RESPONSE提供者
    {
      provide: REQUEST,
      useFactory: (req) => req,
      deps: ['REQUEST']
    },
    {
      provide: RESPONSE,
      useFactory: (res) => res,
      deps: ['RESPONSE']
    },
    // Angular 16+ 需添加此配置
    provideServerRendering()
  ],
})
export class AppServerModule {}

2. 限制REQUEST仅在服务端注入

在使用REQUEST的服务/拦截器中，通过PLATFORM_ID判断环境，避免浏览器端注入（浏览器无REQUEST对象），以你的UniversalInterceptor为例：

import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { REQUEST } from '@nguniversal/common';
import { isPlatformServer } from '@angular/common';
import { Observable } from 'rxjs';

@Injectable()
export class UniversalInterceptor implements HttpInterceptor {
  constructor(
    @Inject(PLATFORM_ID) private platformId: object,
    @Inject(REQUEST) private request?: any
  ) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (isPlatformServer(this.platformId) && this.request) {
      // 仅在服务端处理请求头
      const modifiedReq = req.clone({
        setHeaders: {
          Cookie: this.request.headers.cookie || ''
        }
      });
      return next.handle(modifiedReq);
    }
    return next.handle(req);
  }
}

3. 检查版本兼容性

若使用Angular 16+，@nguniversal/module-map-ngfactory-loader已被弃用，建议替换为provideClientHydration()；同时确保@nguniversal/common、@nguniversal/express-engine等依赖版本与Angular主版本一致。

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