Angular执行prerender预渲染命令失败报错问题求助

问题复现场景 #

搭建了近乎空白的Angular应用，仅保留首页示例用于测试Angular整体运行速度，按照官方Universal文档步骤开启预渲染功能后，执行npm run prerender（对应指令为ng run RegTransfersUI:prerender）时触发报错，核心报错信息如下：

Prerendering 1 route(s) to D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\browser...ERROR NetworkError
    at XMLHttpRequest3.send (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1518293)
    at Observable2._subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:2901957)
    at Observable2._trySubscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201465)
    at D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201357
    at Object.errorContext (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1407544)
    at Observable2.subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201183)
    at scheduleTask (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:3436471)
    at Observable2._subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:3437074)
    at Observable2._trySubscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201465)
    at D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201357
ERROR NetworkError
    at XMLHttpRequest3.send (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1518293)
    at Observable2._subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:2901957)
    at Observable2._trySubscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201465)
    at D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201357
    at Object.errorContext (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1407544)
    at Observable2.subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201183)
    at scheduleTask (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:3436471)
    at Observable2._subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:3437074)
    at Observable2._trySubscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201465)
    at D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201357
√ Prerendering routes to D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\browser complete.
- Generating service worker...1 rules skipped due to selector errors:
  legend+* -> Cannot read properties of undefined (reading 'type')
× Service worker generation failed.
EPERM: operation not permitted, opendir 'D:\System Volume Information'

报错原因拆解 #

日志里一共包含三类独立问题，按影响优先级排序：

• 预渲染阶段NetworkError（非阻断）：预渲染流程运行在Node.js服务端环境，没有浏览器原生的XHR实现，如果代码中在组件初始化逻辑（如ngOnInit）里直接发起相对路径的HTTP请求，Node端无法解析请求的目标域名地址，就会抛出XHR网络错误。从日志看该错误没有阻断预渲染流程，路由预渲染本身已经执行完成。
• CSS选择器解析警告（非阻断）：legend+*选择器报错是@angular/service-worker对应版本CSS解析器的兼容问题，通常是项目内置样式或第三方样式中的相邻兄弟选择器无法被解析器识别，构建时会自动跳过该条CSS规则，不影响核心功能。
• Service Worker生成EPERM错误（核心阻断原因）：Windows系统中D:\System Volume Information是系统级保护目录，存储系统还原点等核心数据，默认普通用户无访问权限。出现该错误说明执行构建命令时，工作区配置的资源扫描路径范围覆盖了D盘根目录，Service Worker生成阶段递归遍历目录收集静态资源时，尝试读取该受保护目录被系统拒绝，直接终止构建流程。

修复方案 #

• 针对预渲染NetworkError：
  • 用isPlatformBrowser判断运行环境，将仅需在浏览器端执行的HTTP请求逻辑包裹在浏览器环境判断分支内，避免服务端预渲染阶段执行无上下文的XHR请求
  • 若预渲染阶段必须拉取接口数据，为请求配置完整的绝对路径前缀，禁止使用相对路径，同时保证预渲染执行时对应接口服务可正常访问
• 针对CSS选择器警告：
  该警告无需特殊处理，要消除提示可全局搜索项目中legend+*选择器修改为解析器兼容的写法，或升级@angular/service-worker到最新补丁版本
• 针对EPERM权限错误：
  • 执行构建命令前先通过cd命令进入项目根目录（即angular.json所在的D:\git\Regtransfers-Core-Ang路径），禁止在磁盘根目录下直接执行构建指令
  • 检查angular.json中serviceWorker相关配置，确认ngswConfigPath以及资源输出路径配置均指向项目内的dist目录，不得配置为磁盘根路径
  • 若仍存在扫描越权问题，在ngsw-config.json的资源配置中添加系统目录排除规则即可，不建议长期使用管理员权限执行前端构建命令

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