Angular是否需为每个页面组件创建路由模块？forRoot/forChild疑问

问题描述 #

我在项目中创建了如下路由配置：

app-routing.module.ts

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

const routes: Routes = [
  { path: 'Documentacion', loadChildren: () => import('./pages/documentacion/documentacion.module').then(m => m.DocumentacionModule) },
  { path: 'Main', loadChildren: () => import('./pages/main/main.module').then(m => m.MainModule) },
  { path: '**', redirectTo:'Main' }
];

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

但该配置无法正常工作：使用router-link锚点或直接输入URL时，网站要么重定向到首页，要么URL正确但页面无法加载。之后我尝试为每个创建的页面单独创建路由模块，问题就解决了。

请问在Angular中，是否必须为每个页面（组件）创建路由模块？我查阅了Angular官方路由文档，文档中似乎没有提及这一要求，但之前的项目这么做才能正常运行。

更新1：补充Documentacion页面的路由模块代码：

documentacion-routing.module.ts

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

const routes: Routes = [{ path: '', component: DocumentacionComponent }];

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

我注意到app路由使用forRoot，页面路由使用forChild，这种写法是否正确？

解答 #

1. 是否必须为每个页面创建路由模块？ #

不是必须的。Angular支持两种路由配置方式：

• 集中式配置：直接在根路由模块里定义所有路由，不管是直接绑定组件，还是通过loadChildren懒加载模块。但懒加载的模块内部必须配置路由（可以直接在模块里导入RouterModule.forChild并写路由规则，不一定非要单独拆出路由模块）。
• 分模块路由：为每个功能模块单独创建路由模块，这是Angular官方推荐的最佳实践，尤其在大型项目中，能让路由结构更清晰，便于维护和拆分懒加载模块。

你最初的配置失效，核心原因是懒加载的模块（比如DocumentacionModule）内部没有正确配置路由：要么没通过forChild注册组件的路由规则，要么组件没在模块中声明，导致路由找不到对应的组件去渲染。

2. forRoot和forChild的写法是否正确？ #

完全正确。

• RouterModule.forRoot(routes)：只能在根模块关联的路由模块中调用一次，作用是初始化路由器，配置全局级别的路由规则（比如通配符重定向、全局路由守卫等）。
• RouterModule.forChild(routes)：专门用于功能模块的路由配置，会把模块内的路由注册到根路由器中，不能在根模块里调用，避免重复初始化路由器实例。

你补充的documentacion-routing.module.ts写法完全符合Angular的路由规范，这也是解决你之前问题的关键：通过forChild配置了模块的默认路由，让懒加载模块能正确找到要渲染的组件。

内容的提问来源于stack exchange，提问作者matias gabriel Tommasi