Angular中router.navigate抛出错误为何未进入catch块？

我写了这段Angular代码：

try {
  this._router.navigate([result?.data?.menuLink]);
  console.log('inside try block');
} catch {
  this._router.navigate(['/dashboards/analytics']);
  console.log('inside catch block'); 
}

当router.navigate的目标路径不存在时，控制台明明抛出了路由匹配错误，但代码就是没进入catch块。

控制台报错：

core.mjs:6469 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'config/payment'

用async/await捕获异步错误 #

把包含这段代码的方法改成异步函数，用await等待navigate的Promise完成，这样try/catch就能捕获到错误了：

async goToTargetPage() {
  try {
    await this._router.navigate([result?.data?.menuLink]);
    console.log('导航成功，进入try块');
  } catch (err) {
    this._router.navigate(['/dashboards/analytics']);
    console.log('导航失败，进入catch块');
  }
}

用Promise的catch回调处理 #

直接在navigate后面链式调用.catch()，专门处理路由失败的情况：

this._router.navigate([result?.data?.menuLink])
  .then(() => console.log('导航成功'))
  .catch(() => {
    this._router.navigate(['/dashboards/analytics']);
    console.log('导航失败，执行降级路由');
  });

因为Router.navigate()返回的是Promise，属于异步操作。普通的同步try/catch只能抓当前代码执行栈里的同步错误，管不到异步Promise的拒绝状态，所以错误会直接跑到控制台，进不了catch块。

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