Angular 5子路由异常：子组件同时加载到根路由与子路由

嘿，我来帮你搞定这个路由问题！你遇到的情况是子组件（比如Profile、Login）既可以在子路由路径访问，又能在根路径访问，核心原因是子模块的路由被重复注册到了根路由树和子路由树中，下面我一步步给你拆解解决方案：

问题根源分析 #

你现在的配置里犯了两个关键错误：

1. 你把ProfileModule、StaffModule直接导入到了DashboardModule中，同时这些子模块自身的路由（通过RouterModule.forChild()配置）会被自动注册到根路由树里，导致/profile这样的根路径也能匹配到组件。
2. 登录模块同理，应该是你直接把Auth模块导入到了根AppModule里，导致/login路径也能生效，而不是仅在/auth/login下生效。

具体修复步骤 #

第一步：修复Dashboard下的子路由（Profile/Staff） #

1. 重构dashboard.routing.ts，改用懒加载子模块

把直接引用组件的方式改成懒加载对应子模块，这样子模块的路由会被挂载到/dashboard路径下：

import { Routes, RouterModule } from '@angular/router';
import { EnsureAuthenticated } from '../auth/services/ensure-authenticated.service';

const dashboardRoutes: Routes = [
  {
    path: 'profile',
    // 懒加载Profile模块，路由会挂载到/dashboard/profile
    loadChildren: '../profile/profile.module#ProfileModule',
    canActivate: [EnsureAuthenticated]
  },
  {
    path: 'staff',
    // 懒加载Staff模块，路由会挂载到/dashboard/staff
    loadChildren: '../staff/staff.module#StaffModule',
    canActivate: [EnsureAuthenticated]
  }
];

export const dashboardRouting = RouterModule.forChild(dashboardRoutes);

2. 修改DashboardModule，移除直接导入的子模块

从imports数组里删掉ProfileModule和StaffModule，避免它们的路由被注册到根路由树：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DashboardComponent } from './dashboard.component';
import { dashboardRouting } from './dashboard.routing';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    dashboardRouting
    // 移除ProfileModule和StaffModule的导入
  ],
  declarations: [DashboardComponent],
  providers: [],
  exports: []
})
export class DashboardModule {}

3. 配置子模块的内部路由（以ProfileModule为例）

给ProfileModule添加独立的路由配置，路径设为空（因为父路由已经是/dashboard/profile了）：

// profile.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { ProfileComponent } from './profile.component';

const profileRoutes: Routes = [
  { path: '', component: ProfileComponent } // 空路径对应父路由的/profile后缀
];

export const profileRouting = RouterModule.forChild(profileRoutes);

然后在ProfileModule里导入这个路由：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProfileComponent } from './profile.component';
import { profileRouting } from './profile.routing';

@NgModule({
  imports: [CommonModule, profileRouting],
  declarations: [ProfileComponent]
})
export class ProfileModule {}

StaffModule的配置和ProfileModule完全一致，照着改就行。

第二步：修复登录模块（Auth）的路由问题 #

1. 重构app.routing.ts，懒加载Auth模块

把Auth模块的路由改成懒加载，避免根路由树中出现/login路径：

import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginRedirect } from './auth/services/login-redirect.service';
import { EnsureAuthenticated } from './auth/services/ensure-authenticated.service';

const appRoutes: Routes = [
  {
    path: "dashboard",
    component: DashboardComponent,
    canActivate: [EnsureAuthenticated],
    loadChildren: './dashboard/dashboard.module#DashboardModule',
  },
  {
    path: 'auth',
    // 懒加载Auth模块，路由会挂载到/auth路径下
    loadChildren: './auth/auth.module#AuthModule'
  },
  {
    path: '**',
    redirectTo: 'dashboard',
    canActivate: [EnsureAuthenticated]
  }
];

export const routing = RouterModule.forRoot(appRoutes);

2. 配置Auth模块的内部路由

给Auth模块添加独立路由，确保login路径挂载在/auth下：

// auth.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { LoginRedirect } from './services/login-redirect.service';

const authRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [LoginRedirect]
  }
];

export const authRouting = RouterModule.forChild(authRoutes);

然后在AuthModule里导入这个路由，并且确保AppModule里移除Auth模块的直接导入。

验证修复效果 #

做完上面的修改后：

• Profile组件只能通过localhost:4200/dashboard/profile访问，localhost:4200/profile会因为没有匹配的路由被重定向到dashboard。
• 登录组件只能通过idr-frontend.staging.myappworx.com/auth/login访问，idr-frontend.staging.myappworx.com/login会触发重定向（或者你可以额外配置一个/login路由重定向到/auth/login，根据需求调整）。

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