Angular 10路由导航失效，解决MatDialogRef注入后仍无法跳转

1. 核对路由配置正确性 #

确保app-routing.module.ts（或对应功能路由模块）中已正确注册changePassword组件的路由规则：

const routes: Routes = [
  // 其他路由项
  { path: 'changePassword', component: ChangePasswordComponent }
];

• 注意路径大小写：Angular路由默认区分大小写，需保证跳转路径与配置完全一致
• 若使用懒加载模块，需确认路由配置格式正确，且对应模块已被导入到根模块或路由模块中

2. 确认组件的模块归属 #

• 检查ChangePasswordComponent是否在所属模块的declarations数组中声明，若属于功能模块，需确认该模块已被导入到根模块或路由模块
• 因之前遇到过MatDialogRef注入错误，再次确认MatDialogModule已在组件所属模块的imports数组中导入

3. 排查路由导航的执行上下文 #

• 若在MatDialog弹窗组件内执行跳转，建议先关闭弹窗再执行导航，避免弹窗未销毁导致的上下文异常：

this.dialogRef.close();
this.router.navigate(['/changePassword']);

• 也可尝试使用Location服务替代Router进行导航测试：

import { Location } from '@angular/common';

constructor(private location: Location) {}

// 替换原有导航代码
this.location.replaceState('/changePassword');

4. 检查路由守卫拦截 #

查看项目中是否存在CanActivate、CanLoad等路由守卫，这类守卫可能会阻止跳转到changePassword组件。可临时注释守卫代码测试跳转是否正常，再排查守卫逻辑问题。

5. 查看控制台隐藏错误 #

打开浏览器开发者工具的Console面板，检查是否存在未捕获的异常（比如组件初始化错误、依赖注入遗漏等），这些隐性错误可能会导致路由跳转失败。

6. 确认路由出口存在 #

确保根组件（如app.component.html）中包含<router-outlet></router-outlet>；若为嵌套路由，父组件中也需配置对应的路由出口。

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