Angular 15导航报错NG04013：无法激活已激活路由出口求助

可能的原因及解决方案 #

1. 表单提交触发默认行为导致重复导航 #

如果LoginComponent模板使用了<form>标签，点击提交按钮时会同时触发Angular的导航逻辑和浏览器的表单默认提交行为，引发路由出口状态冲突。

解决方法：

• 给提交按钮添加type="button"属性，阻止默认表单提交：

<button type="button" (click)="submit()">登录</button>

• 或者使用Angular表单的ngSubmit事件绑定：

<form (ngSubmit)="submit()">
  <!-- 表单控件 -->
  <button type="submit">登录</button>
</form>

submit() {
  // 处理登录逻辑后导航
  this.router.navigate(['/home']);
}

2. 避免重复导航到当前路由 #

重复触发导航（比如多次点击提交按钮），或当前路由已是目标路由时，也会触发该错误。在导航前检查当前路由：

submit() {
  if (this.router.url !== '/home') {
    this.router.navigate(['/home']);
  }
}

3. 确保路由出口DOM稳定 #

确认AppComponent中无其他逻辑动态销毁/重建路由出口，保持router-outlet始终存在于DOM中：

<mat-toolbar *ngIf="router.url !== '/login'" color="primary">
  <mat-icon>local_fire_department</mat-icon>
  <span>Kanban Fire</span>
</mat-toolbar>
<router-outlet></router-outlet>

4. 升级Angular版本修复潜在bug #

Angular 15.2.x早期版本存在路由相关已知问题，可升级到同大版本的最新补丁版：

npm install @angular/core@^15.2.10 @angular/router@^15.2.10

验证步骤 #

1. 优先尝试阻止表单默认行为的方案，这是该错误最常见的触发原因；
2. 若无效，添加路由检查逻辑避免重复导航；
3. 最后考虑升级版本修复框架层面问题。

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