Angular 10+ 路由使用模块替代组件时出现白屏问题求助

嘿，我来帮你搞定这个路由白屏的问题～你之前用组件配置路由没问题，但换成模块懒加载就白屏，主要是两个地方没做对：懒加载的语法错误和模块内缺少路由配置，下面一步步给你修正：

问题分析 #

1. loadChildren写法不符合规范：你直接返回DashboardModule，但Angular懒加载模块要求返回一个异步导入的Promise，框架才能正确识别并加载模块。
2. DashboardModule未配置路由规则：当通过模块加载路由时，这个模块必须明确告诉路由系统要渲染哪个组件，否则路由不知道该显示什么内容，自然就出现白屏了。

修正步骤 #

1. 修正AppRoutingModule的懒加载语法 #

把loadChildren改成Angular官方要求的异步导入格式，修改app-routing.module.ts：

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

const routes: Routes = [
  // 正确的懒加载写法：异步导入模块并返回对应类
  { path: '', loadChildren: () => import('./components/dashboard/dashboard.module').then(m => m.DashboardModule) }
];

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

2. 给DashboardModule添加路由配置 #

有两种实现方式，推荐第一种（独立路由模块，更符合Angular模块化规范）：

方式一：创建独立的Dashboard路由模块

在dashboard文件夹下新建dashboard-routing.module.ts，内容如下：

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

// 配置模块的子路由，默认路径指向DashboardComponent
const routes: Routes = [
  { path: '', component: DashboardComponent }
];

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

然后修改DashboardModule，导入这个路由模块：

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

@NgModule({
  declarations: [
    DashboardComponent
  ],
  imports: [
    CommonModule,
    DashboardRoutingModule // 添加到imports数组中
  ]
})
export class DashboardModule { }

方式二：直接在DashboardModule内配置路由

如果不想单独创建路由模块，也可以直接在DashboardModule里配置子路由：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';

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

@NgModule({
  declarations: [
    DashboardComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes) // 直接配置子路由
  ]
})
export class DashboardModule { }

测试验证 #

修改完成后重启项目，应该就能看到DashboardComponent的alert弹出，组件也能正常渲染了～

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