Angular 9 + .NET Core 3.1 SSR NetworkError调试问题排查

一、定位服务端API调用来源 #

通过全局HTTP拦截器捕获服务端环境下的所有请求，打印URL和调用栈直接定位问题：

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

@Injectable()
export class ServerRequestLoggerInterceptor implements HttpInterceptor {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (isPlatformServer(this.platformId)) {
      console.log('[服务端请求] URL:', req.url);
      console.log('[调用栈]', new Error().stack);
    }
    return next.handle(req);
  }
}

将拦截器注册到app.server.module.ts的providers中，服务端运行时就能在日志中看到所有请求的详细调用链路。

二、.NET端配置详细日志 #

1. 修改appsettings.json，开启NodeServices的Debug级日志：

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore.NodeServices": "Debug"
    }
  }
}

2. 在Startup.cs中配置NodeServices日志输出，确保Node端日志传递到Visual Studio输出窗口：

using Microsoft.AspNetCore.NodeServices;
using Microsoft.Extensions.Logging;

public void ConfigureServices(IServiceCollection services)
{
    services.AddNodeServices(options =>
    {
        options.Logger = loggerFactory.CreateLogger("NodeServices");
    });
}

三、修改angular.json启用调试构建 #

为server端添加debug配置，生成sourceMap方便断点调试：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/server",
    "main": "src/main.server.ts",
    "tsConfig": "src/tsconfig.server.json"
  },
  "configurations": {
    "production": {
      // 原有生产配置
    },
    "debug": {
      "sourceMap": true,
      "optimization": false,
      "buildOptimizer": false
    }
  }
},
"serve-ssr": {
  "builder": "@nguniversal/builders:ssr-dev-server",
  "options": {
    "browserTarget": "ClientApp:build:debug",
    "serverTarget": "ClientApp:server:debug"
  }
}

执行ng run ClientApp:serve-ssr即可使用调试模式构建。

四、用NodeServicesOptions附加Node.js调试器 #

1. 在Startup.cs中配置调试参数：

public void ConfigureServices(IServiceCollection services)
{
    services.AddNodeServices(options =>
    {
        options.LaunchWithDebugging = true;
        options.DebuggingPort = 9229; // 自定义端口需确保未被占用
    });
}

2. 启动.NET项目后，打开Chrome浏览器访问chrome://inspect，点击「Configure」添加localhost:9229，找到对应的Node进程后点击「Inspect」打开DevTools，即可在Sources面板中找到服务端Angular源码并设置断点调试。

五、其他排查方案 #

• 补全服务端API绝对URL：服务端无浏览器baseURL，需将相对请求（如/api/data）改为绝对URL（如https://localhost:5001/api/data），可通过环境变量或APP_BASE_HREF动态拼接：

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
  this.apiBaseUrl = isPlatformServer(this.platformId) 
    ? 'https://localhost:5001/api' 
    : '/api';
}

• 全局捕获XHR错误：在main.server.ts中重写XMLHttpRequest的send方法，捕获错误详情：

const originalSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
  this.addEventListener('error', (e) => {
    console.error('XHR错误详情:', e);
    console.error('请求URL:', this.responseURL);
    console.error('调用栈:', new Error().stack);
  });
  originalSend.apply(this, arguments);
};

• 检查Node版本兼容性：Angular 9建议使用Node 12.x/14.x版本，避免因版本不匹配导致的未知错误。

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