升级Angular 17.3后Deferrable Views触发调用栈溢出问题

问题现象 #

• 未使用@defer指令时，包含router-outlet的3个组件加载完全正常
• 用@defer(when isDataLoaded)包裹相同组件结构后出现两个核心问题：
  • 触发调用栈溢出错误，app-header与导航组件被重复加载100+次
  • routerLink相对路径失效，自动转为根路径引用
• isDataLoaded为初始false、API请求完成后设为true的布尔值，Angular 17.1版本无此异常

错误栈信息 #

core.mjs:6531 ERROR RangeError: Maximum call stack size exceeded
at R3Injector.get (core.mjs:3043:5)
at R3Injector.get (core.mjs:3093:33)
at R3Injector.get (core.mjs:3093:33)
at R3Injector.get (core.mjs:3093:33)
at lookupTokenUsingEmbeddedInjector (core.mjs:6155:72)
at getOrCreateInjectable (core.mjs:5766:43)
at NodeInjector.get (core.mjs:6072:16)
at OutletInjector.get (router.mjs:2544:24)
at ChainedInjector.get (core.mjs:15668:37)
at lookupTokenUsingModuleInjector (core.mjs:5730:39)

可行修复方向 #

1. 调整@defer与路由组件的嵌套关系

   • 避免在@defer块内直接嵌套router-outlet或依赖路由注入器的组件，尝试将router-outlet移至@defer外部
   • 若必须在@defer内使用路由，检查组件注入器配置，避免出现路由服务的循环依赖

2. 修改@defer的触发逻辑

   • 改用@defer(on idle)或@defer(on viewport)替代条件触发，验证是否为条件变更时的注入器重建导致循环调用
   • 确保isDataLoaded仅在API请求完成后一次性设置为true，避免重复触发变更检测

3. 临时版本回退

   • 若需紧急修复，可先降级至Angular 17.2版本，等待官方修复17.3中@defer与路由结合的bug

4. 检查组件依赖注入配置

   • 确认app-header和导航组件的服务是否使用providedIn: 'root'，避免@defer块创建新注入器时重复实例化服务引发循环引用

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