Angular 15中router.navigate/navigateByUrl非函数问题排查

一、TypeError: this.router.navigate is not a function 报错原因及解决 #

这个报错本质是Router实例未被正确注入，结合你提到移除@Inject(DOCUMENT)后报错消失，大概率是依赖注入的顺序或写法不符合Angular 15的严格校验规则：

• 检查组件构造函数中依赖注入的顺序：Angular 15对依赖注入的参数顺序要求更严格，确保Router的注入放在@Inject(DOCUMENT)之前，或者使用装饰器显式标注避免顺序问题。
  错误示例：

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private router: Router // 顺序靠后可能导致注入异常
  ) {}
  

  修正后：

  constructor(
    private router: Router,
    @Inject(DOCUMENT) private document: Document
  ) {}
  

• 检查组件元数据providers：确保没有在组件的@Component装饰器中错误声明Router，否则会注入无效的局部实例而非全局Router对象。

二、office/:id 路由无法跳转的排查与解决 #

移除@Inject(DOCUMENT)后路由仍无法跳转，从以下方向逐一排查：

1. 验证路由配置
   确保路由模块中office/:id的规则未被其他优先级更高的路由（如空路径、通配符路由）拦截，配置示例：

   const routes: Routes = [
     { path: 'office/:id', component: OfficeComponent },
     { path: '', redirectTo: '/home', pathMatch: 'full' },
     { path: '**', component: NotFoundComponent }
   ];
   

2. 检查navigate参数格式
   调用router.navigate时必须使用数组格式传递路径，动态参数单独拆分：
   错误示例：

   this.router.navigate('/office/' + id);
   

   正确写法：

   this.router.navigate(['/office', id]);
   

   使用navigateByUrl时需确保路径完整：

   this.router.navigateByUrl(`/office/${id}`);
   

3. 排查路由守卫拦截
   查看office/:id路由是否配置了canActivate、canLoad等守卫，若守卫返回false或异步逻辑未正确处理，会阻止跳转。可临时注释守卫代码测试是否恢复正常。
4. 确认Router实例有效性
   在组件构造函数中打印this.router，确认输出为有效Router实例而非undefined，若为无效值则说明注入仍存在问题，需重新检查模块导入（确保RouterModule已在根模块或特性模块中导入）。

内容的提问来源于stack exchange，提问作者Peter The Angular Dude