Angular 5 SSR组件返回404时出现Can't set headers报错求助

这个错误的核心原因是：Angular的ngExpressEngine在完成组件渲染后会自动向客户端发送响应，如果你在组件中手动修改响应头/状态码的时机不对，就会和这个自动流程冲突，导致重复发送响应头。下面是具体的修复步骤：

1. 正确注入Angular SSR的RESPONSE令牌 #

不要直接注入Express的response对象，改用Angular平台服务器提供的RESPONSE令牌，确保和SSR渲染流程兼容：

修改server.js的providers配置 #

// 先导入RESPONSE
const { RESPONSE } = require('@angular/platform-server');

app.engine('html', (_, options, callback) => {
  let engine = ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      { 
        provide: RESPONSE, 
        useFactory: () => options.req.res, 
        deps: [] 
      },
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  });
  engine(_, options, callback);
});

在组件中注入并设置状态码 #

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { RESPONSE } from '@angular/platform-server';
import { Response } from 'express';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Inject(RESPONSE) private response: Response
  ) {
    // 仅在服务端渲染时设置状态码
    if (isPlatformServer(this.platformId)) {
      // 这里要确保在组件初始化时就设置，不要等到渲染完成后
      this.response.status(404);
    }
  }
}

2. 避免重复发送响应的额外处理 #

如果还是出现报错，可能是因为ngExpressEngine已经开始发送响应了。这时候可以在server.js的渲染回调中，先检查状态码再发送响应：

app.engine('html', (_, options, callback) => {
  let engine = ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      { 
        provide: RESPONSE, 
        useFactory: () => options.req.res, 
        deps: [] 
      },
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  });

  engine(_, options, (err, html) => {
    // 检查是否已经设置了状态码，避免重复操作
    if (!options.req.headersSent) {
      // 如果组件中设置了404，这里会保留状态码，直接发送即可
      callback(err, html);
    }
  });
});

3. 动态路由场景的补充方案 #

如果是动态路由（比如根据ID查询数据，数据不存在时返回404），建议在组件的ngOnInit中设置状态码，并且确保在数据加载失败时立即设置：

ngOnInit() {
  this.dataService.getItem(this.id).subscribe({
    next: (data) => {
      // 数据存在时的逻辑
    },
    error: () => {
      if (isPlatformServer(this.platformId)) {
        this.response.status(404);
      }
      // 跳转到404组件或显示错误内容
    }
  });
}

关键要注意：状态码必须在Angular开始向客户端发送响应之前设置，所以尽量在组件初始化或数据加载失败的第一时间处理，不要等到渲染完成后再操作。

内容的提问来源于stack exchange，提问作者Łukasz Walkowiak