Angular 5：嵌套lazy-loaded模块路由配置及feature-module复用问题求助

看起来你遇到的核心问题是Identify模块作为懒加载容器，引入同级的Questionnaires懒加载模块后，进入Identify主路由时会自动跳转到Questionnaires的子路由。这大概率是路由配置里的默认重定向逻辑冲突导致的，下面我给你一步步拆解解决方案：

一、先理清路由层级逻辑 #

我们的目标是让URL结构为/identify/questionnaires（以及Questionnaires的子路由如/identify/questionnaires/detail/1），所以要保证：

1. Identify是顶层懒加载路由，它的子路由里包含Questionnaires的懒加载项
2. Questionnaires的路由配置是相对自身模块的，不会干扰Identify的主路由

二、修正Identify模块的路由配置 #

你的identify-routing.module.ts需要调整成这样（注意去掉不必要的默认重定向）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { IdentifyComponent } from './identify.component'; // 你的Identify主组件

const routes: Routes = [
  {
    path: '', // 对应父路由的`/identify`路径
    component: IdentifyComponent,
    children: [
      // 这里配置Questionnaires作为Identify的子懒加载路由
      {
        path: 'questionnaires',
        // 注意路径是同级的Questionnaires模块，根据你的实际目录调整
        loadChildren: () => import('../questionnaires/questionnaires.module').then(m => m.QuestionnairesModule)
      },
      // ❌ 重点：不要加下面这条！否则进入/identify会直接跳转到questionnaires
      // { path: '', redirectTo: 'questionnaires', pathMatch: 'full' }

      // 如果需要Identify主路由默认显示自己的内容，可以加自己的子组件路由
      // { path: '', component: IdentifyHomeComponent }
    ]
  }
];

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

三、确保Questionnaires模块路由的独立性 #

检查你的questionnaires-routing.module.ts，保证它的路由是基于自身模块根路径的，不要有全局级的重定向干扰：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { QuestionnairesComponent } from './questionnaires.component';
import { QuestionnaireDetailComponent } from './detail/questionnaire-detail.component';

const routes: Routes = [
  {
    path: '', // 对应父路由的`/identify/questionnaires`路径
    component: QuestionnairesComponent,
    children: [
      { path: 'detail/:id', component: QuestionnaireDetailComponent },
      // 这里可以加Questionnaires内部的默认重定向（比如进入/identify/questionnaires时显示某个子组件）
      // { path: '', redirectTo: 'overview', pathMatch: 'full' }
    ]
  }
];

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

四、根路由的懒加载配置（参考） #

你的app-routing.module.ts里，Identify的懒加载配置应该是这样的：

const routes: Routes = [
  // 其他全局路由...
  {
    path: 'identify',
    loadChildren: () => import('./identify/identify.module').then(m => m.IdentifyModule)
  },
  // 如果需要保留Questionnaires的独立访问路由，可以保留，不影响嵌套使用
  // {
  //   path: 'questionnaires',
  //   loadChildren: () => import('./questionnaires/questionnaires.module').then(m => m.QuestionnairesModule)
  // }
];

五、问题根源总结 #

你之前遇到的自动重定向，大概率是下面两个原因之一：

1. Identify的路由里加了默认重定向到questionnaires：比如{ path: '', redirectTo: 'questionnaires', pathMatch: 'full' }，导致进入/identify就直接跳转到子路由
2. Questionnaires的路由配置有问题：比如它的根路由不是相对自身的，或者有全局级的重定向逻辑

六、调试小技巧 #

可以用Angular DevTools的Routes面板查看当前路由树，直观看到路由的层级和重定向规则，快速定位问题。

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