Angular如何路由到特性模块？跨模块路由问题求助

看起来你遇到的是Angular子路由配置的典型问题，要让feature.html嵌入group.html的router-outlet，需要正确配置父路由（Group模块）的子路由和Feature模块的路由，以下是一步步的解决方案：

1. 给Feature模块添加路由模块 #

首先，我们需要为Feature模块创建专属的路由配置，这样它才能作为子路由被Group模块加载：

在Feature模块目录下新建feature-routing.module.ts，添加以下代码：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './feature.component';

// 这里用空路径，因为父路由已经包含了/feature部分
const routes: Routes = [
  { path: '', component: FeatureComponent }
];

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

然后修改feature.module.ts，导入刚创建的路由模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';
import { FeatureRoutingModule } from './feature-routing.module'; // 导入路由模块

@NgModule({
  imports: [
    CommonModule,
    FeatureRoutingModule // 添加到imports数组
  ],
  declarations: [FeatureComponent]
})
export class FeatureModule { }

2. 配置Group模块的子路由 #

接下来要在Group模块的路由中，将/group/feature指向Feature模块，同时确保Group组件的模板包含router-outlet：

第一步：修改Group模块的路由配置 #

假设你有group-routing.module.ts，更新路由数组如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GroupComponent } from './group.component';

const routes: Routes = [
  {
    path: 'group',
    component: GroupComponent,
    // 配置子路由，加载Feature模块
    children: [
      {
        path: 'feature',
        // 懒加载Feature模块（推荐方式）
        loadChildren: () => import('../feature/feature.module').then(m => m.FeatureModule)
      }
    ]
  }
];

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

第二步：确保Group组件模板包含router-outlet #

打开group.component.html，确认里面有<router-outlet>标签，这是子组件内容的嵌入点：

<!-- group.html的其他内容 -->
<router-outlet></router-outlet>

3. 验证根路由配置 #

最后检查根路由（app-routing.module.ts）是否正确加载了Group模块，确保没有冲突的路由规则：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 加载Group模块的路由
  { path: '', loadChildren: () => import('./group/group.module').then(m => m.GroupModule) },
  // 其他根路由...
];

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

常见错误排查 #

• 如果还是404，检查路由路径拼写是否一致（比如大小写、斜杠）
• 确认Feature组件已经正确声明在FeatureModule中
• 不要在Feature模块的路由中重复写feature路径，否则会变成/group/feature/feature

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