Angular懒加载路径正常但页面为空问题求助

我在使用Angular懒加载时遇到问题：页面可正常导航，路径也正确，但懒加载的页面（如http://localhost:4200/contact和http://localhost:4200/tours）显示为空。项目结构简单，相关代码如下：

相关代码 #

app.routes.ts #

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

export enum AppRoutes {
  HOME = 'home',
  TOURS = 'tours',
  CONTACT = 'contact'
}

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: AppRoutes.HOME},

 {
    path: AppRoutes.TOURS,
    loadChildren: () =>
      import('./pages/tours/tours.module').then((m) => m.ToursModule),
  },
  {
    path: AppRoutes.CONTACT,
    loadChildren: () =>
      import('./pages/contact/contact.module').then((m) => m.ContactModule),
  },
  {
    path: '**',
    redirectTo: AppRoutes.HOME,
  },
];

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

navbar.component.html #

<a [routerLink]="'/tours'" routerLinkActive="active">Tours</a>
<a [routerLink]="'/contact'" routerLinkActive="active">Contact</a>

排查与解决步骤 #

• 检查子模块路由配置：懒加载的子模块（如ToursModule、ContactModule）必须配置独立的路由模块，并且设置空路径路由指向对应组件。示例代码如下：

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

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

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

若子模块未配置空路径路由，Angular无法确定要渲染的组件，会导致页面空白。

• 确认子模块组件声明：在ToursModule和ContactModule的declarations数组中，必须包含对应的页面组件（如ToursComponent、ContactComponent），确保组件已被正确注册。

• 检查根组件的路由出口：app.component.html中必须存在<router-outlet>标签，这是Angular渲染路由组件的容器，缺失该标签会导致所有路由组件无法显示。

• 验证懒加载路径正确性：确认loadChildren中的模块导入路径（如./pages/tours/tours.module）拼写正确，注意操作系统的大小写敏感性（Linux/macOS环境路径区分大小写）。

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