Angular模块嵌套路由配置问题：注册页无法映射到/register路径

问题根因 #

你当前的路由嵌套结构中，AuthModule被挂载在login路径下，该模块下所有子路由会自动继承/login前缀，因此注册页实际可访问路径为/login/register，无法直接匹配你期望的/register路径。

解决方案（2种可选） #

方案1：调整Auth模块路由结构（推荐，统一管理所有鉴权相关路由）

1. 修改public-layout.routes.ts，将Auth模块的挂载路径改为空，让其所有子路由直接作为顶级路径：

import { Routes } from '@angular/router';

export const publicRoutes: Routes = [
  {
    path: '',
    loadChildren: () =>
      import('@app/auth/auth.module').then((m) => m.AuthModule),
  },
];

2. 修改auth-routing.module.ts，给登录页补充login路径前缀：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'forgot-password', component: ForgotPasswordComponent },
];

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

修改后三个鉴权页面的访问路径为：/login、/register、/forgot-password，完全符合需求。

方案2：新增独立注册页路由（适合不想改动现有路由结构的场景）

直接在public-layout.routes.ts中新增注册页的顶级路由配置即可：

import { Routes } from '@angular/router';
import { RegisterComponent } from '@app/auth/register/register.component';

export const publicRoutes: Routes = [
  {
    path: 'login',
    loadChildren: () =>
      import('@app/auth/auth.module').then((m) => m.AuthModule),
  },
  {
    path: 'register',
    component: RegisterComponent
  }
];

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