升级Angular至15后路由导航触发TypeError: instanceCleanupFn is not a function错误求助

问题场景 #

将Angular应用从14升级到15后，使用Material工具栏通过mainMenu和systemMenu数组循环生成带routerLink的导航链接，所有路由均已配置，但切换路由时触发如下错误：

ERROR Error: Uncaught (in promise): TypeError: instanceCleanupFn is not a function
TypeError: instanceCleanupFn is not a function
    at processCleanups (core.mjs:5952:13)
    at cleanUpView (core.mjs:5893:9)
    at destroyViewTree (core.mjs:5725:17)
    at destroyLView (core.mjs:5870:9)
    at RootViewRef.destroy (core.mjs:11797:9)
    at ComponentRef.destroy (core.mjs:12218:23)
    at RouterOutlet.deactivate (router.mjs:2622:28)
    at ActivateRoutes.deactivateRouteAndOutlet (router.mjs:2996:28)
    at ActivateRoutes.deactivateRouteAndItsChildren (router.mjs:2969:18)
    at ActivateRoutes.deactivateRoutes (router.mjs:2958:22)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:24165:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at drainMicroTaskQueue (zone.js:585:35)
    at ZoneTask.invokeTask [as invoke] (zone.js:491:21)
    at invokeTask (zone.js:1661:18)

该功能在Angular 14中可正常运行。

可能原因 #

• Angular 15对视图销毁阶段的清理逻辑做了严格变更，若模板中存在未正确初始化的指令/组件引用，会导致清理函数调用失败。
• 路由绑定存在异常：比如routerLink绑定了空值、未定义的路径，或者路由配置与实际绑定不匹配。
• Angular Material版本未同步升级：Material组件与Angular核心版本不兼容，导致组件销毁时逻辑异常。
• 自定义组件/指令的ngOnDestroy钩子存在错误的清理逻辑，比如调用了未定义的函数。

解决方法 #

• 校验路由绑定的合法性
  遍历mainMenu和systemMenu数组，确保每个项的路由路径非空、已在路由配置中注册，推荐使用数组格式的routerLink绑定，减少解析错误：

  // 示例：正确的菜单数组配置
  mainMenu = [
    { label: '首页', path: ['/home'] },
    { label: '系统设置', path: ['/system/settings'] }
  ];
  

  模板中对应绑定：

  <a mat-button [routerLink]="menuItem.path">{{ menuItem.label }}</a>
  

• 同步升级Angular Material
  执行命令将Material升级到与Angular 15匹配的版本：

  ng update @angular/material
  

  检查并调整Material组件的使用方式，确保符合15版本的API要求。

• 排查视图销毁逻辑
  检查组件的ngOnDestroy钩子，确保清理函数已正确定义，未被意外覆盖；若使用ViewChild/ViewChildren获取实例，需确保订阅、资源已正确释放。

• 启用严格模式定位潜在问题
  在tsconfig.json中开启strict: true，编译时会暴露更多类型错误和未初始化问题：

  {
    "compilerOptions": {
      "strict": true
    }
  }
  

• 清理缓存并重建项目
  删除旧依赖和构建缓存，避免残留代码导致的兼容性问题：

  rm -rf node_modules package-lock.json
  npm install
  ng build --clean
  

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