Angular根路由重定向到Page模块后无法渲染PageComponent问题求助

算力阿峰

2026-9-30

问题排查步骤

检查page.module.ts中的导入配置
确保PageModule的imports数组里已经引入了PageRoutingModule，示例配置：

// page.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageRoutingModule } from './page.routing.module';
import { PageComponent } from './page.component';

@NgModule({
  declarations: [PageComponent],
  imports: [
    CommonModule,
    PageRoutingModule // 必须引入子路由模块
  ]
})
export class PageModule { }

检查page.routing.module.ts的路由导出配置
子路由模块必须调用RouterModule.forChild()注册路由，并且导出RouterModule，正确配置示例：

// page.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageComponent } from './page.component';

const routes: Routes = [ // 注意类型是复数Routes，赋值用等号不是冒号
  { path: '', component: PageComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)], // 子路由必须用forChild
  exports: [RouterModule] // 必须导出RouterModule
})
export class PageRoutingModule { }

修复代码语法错误
你贴出的路由配置存在语法问题：
- 路由数组声明错误：const routes: Route: [ 应该改为 const routes: Routes = [，类型为复数Routes，赋值用等号而非冒号
- 根路由中page路径的配置缺少闭合的}符号
检查懒加载路径配置
如果你的page模块放在src/app/page目录下，懒加载导入建议用相对路径，避免别名配置问题：
```
{ path: 'page', loadChildren: () => import('./page/page.module').then(m => m.PageModule) }
```
检查根组件是否存在路由出口
确保app.component.html中存在<router-outlet></router-outlet>标签，路由匹配到的组件会渲染到这个位置。