Angular路由导航异常：调用login2()后无法跳转至Invoice页面

核心问题 #

导航失败由三个关键问题导致：

1. AuthRoutingModule未导出RouterModule，路由配置无法在模块内生效
2. 导航路径未匹配子路由的层级结构
3. 父组件LoginComponent缺少路由出口，无法渲染子路由组件

具体修复步骤 #

1. 修复AuthRoutingModule配置 #

必须导出RouterModule，确保路由指令和配置能被AuthModule识别：

// Auth-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';

const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
    children: [
      {
        path: 'invoice',
        loadChildren: () => import('../Invoice/Components/invoice.module').then(m => m.InvoiceModule)
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule] // 添加这行，导出RouterModule
})
export class AuthRoutingModule {}

2. 修正导航路径 #

根据路由层级，选择以下两种方式之一修正导航逻辑：

方式一：绝对路径导航

如果AuthModule在根路由中的挂载路径是auth，直接指定完整路径：

// login.component.ts
login2() {
  this.router.navigate(['/auth/invoice']);
}

方式二：相对路径导航

依赖当前激活路由进行相对导航，需注入ActivatedRoute：

// login.component.ts
import { ActivatedRoute } from '@angular/router';

constructor(private router: Router, private route: ActivatedRoute) {}

login2() {
  this.router.navigate(['invoice'], { relativeTo: this.route });
}

3. 添加路由出口 #

在LoginComponent的模板文件（login.component.html）中添加<router-outlet>，用于渲染子路由的Invoice组件：

<!-- login.component.html -->
<!-- 保留原有登录相关DOM -->
<router-outlet></router-outlet>

4. 验证InvoiceModule路由配置 #

确保InvoiceModule的路由配置正确，匹配子路由的空路径：

// invoice-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { InvoiceComponent } from './invoice.component';

const routes: Routes = [
  { path: '', component: InvoiceComponent } // 匹配/auth/invoice路径
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class InvoiceRoutingModule {}

同时确认InvoiceModule已导入并导出InvoiceRoutingModule。

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