Angular 13集成Universal执行serve-ssr时出现Invalid URL报错

API 探路者

2026-9-4

报错原因

这个错误是Angular Universal服务端渲染阶段的环境差异问题导致的：
从错误栈可以直接定位到异常抛出位置是项目自定义的InitServ服务构造函数，该函数在实例化时调用了Node原生的new URL()构造方法，且传入的URL参数值为null。
出现null值的常见场景：

代码中直接读取了仅浏览器环境存在的对象属性（比如window.location.origin、location.href），Node服务端不存在window、document等BOM对象，对应取值为null
服务初始化阶段提前读取了Angular Universal提供的REQUEST注入令牌，该令牌仅在请求处理阶段才有值，服务实例化阶段还未绑定请求上下文，取值为null
配置项读取逻辑在服务端环境未命中，拿到空值后直接传入了URL构造函数

修复方案

按以下步骤排查修复：

第一步：打开InitServ对应的源码文件，定位构造函数中所有new URL()的调用点，确认传入的参数来源，找到值为null的变量。
第二步：给URL参数增加环境判断和兜底值，使用Angular内置的平台判断方法区分浏览器/服务端执行逻辑，参考代码：

import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class InitServ {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    // 服务端环境先配置合法的默认域名，替换为项目实际域名即可
    let siteOrigin = 'https://your-site-domain.com';
    if (isPlatformBrowser(this.platformId)) {
      // 仅浏览器环境读取真实的window地址
      siteOrigin = window.location.origin;
    }
    // 后续使用带兜底的siteOrigin创建URL对象，避免传入null
    const targetUrl = new URL('/your-target-path', siteOrigin);
    // 其余原有业务逻辑
  }
}

第三步：如果InitServ的逻辑完全不需要在服务端执行，可以直接在服务端模块中给该服务配置空实现兜底，跳过服务端的实例化逻辑：

// 在app.server.module.ts的providers数组中添加配置
@NgModule({
  // 其余原有配置
  providers: [
    { provide: InitServ, useValue: null }
  ]
})

额外校验：检查server.ts中Express服务的配置，确认没有在全局初始化阶段提前读取请求相关的URL属性，所有和请求地址相关的逻辑都要放在请求处理回调中执行。

提示：Angular Universal项目中所有浏览器专属API（window、document、navigator、localStorage等）的调用都必须加平台判断，或者做非空兜底，否则很容易在服务端启动或渲染阶段抛出异常。

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