Angular组件懒加载失效，请求提供代码改造指导

核心说明 #

Angular的懒加载基于特性模块实现，无法直接对单个组件做懒加载。你当前的路由直接绑定组件，需要改成基于模块的懒加载配置，具体步骤如下：

1. 为组件创建特性模块 #

将需要懒加载的MainScreenComponent和SplashScreenComponent分别封装到独立的特性模块中：

① 创建MainScreenModule

新建main-screen/main-screen.module.ts文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainScreenComponent } from './main-screen.component';
// 导入组件依赖的第三方/自定义模块
import { MatCardModule } from '@angular/material/card';
import { NgxMasonryModule } from 'ngx-masonry';
import { QuantityButtonsModule } from '../quantity-buttons/quantity-buttons.module'; // 按需替换为你的子组件模块
import { RouterModule, Routes } from '@angular/router';

// 特性模块内部路由
const routes: Routes = [
  { path: '', component: MainScreenComponent }
];

@NgModule({
  declarations: [MainScreenComponent],
  imports: [
    CommonModule,
    MatCardModule,
    NgxMasonryModule,
    QuantityButtonsModule,
    RouterModule.forChild(routes)
  ]
})
export class MainScreenModule { }

② 创建SplashScreenModule

新建splash-screen/splash-screen.module.ts文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SplashScreenComponent } from './splash-screen.component';
import { RouterModule, Routes } from '@angular/router';

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

@NgModule({
  declarations: [SplashScreenComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class SplashScreenModule { }

2. 修改根路由配置（AppRoutingModule） #

移除直接导入的组件，改用loadChildren实现动态懒加载：

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

// 移除以下直接导入的组件
// import { SplashScreenComponent } from './splash-screen/splash-screen.component'; 
// import { MainScreenComponent } from './main-screen/main-screen.component';

const routes: Routes = 
[ 
  {
    path:'home',
    // 动态导入特性模块，Angular会自动拆分chunk实现懒加载
    loadChildren: () => import('./main-screen/main-screen.module').then(m => m.MainScreenModule)
  }, 
  {
    path:'splash-screen',
    loadChildren: () => import('./splash-screen/splash-screen.module').then(m => m.SplashScreenModule)
  },
  {path:'',pathMatch:'full',redirectTo:'/home'} 
]; 

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

关键注意事项 #

• 确保特性模块中导入了所有组件依赖的模块（比如Material组件、ngx-masonry、子组件模块等），否则组件会出现样式或功能缺失。
• loadChildren必须使用import()动态导入语法，这是Angular识别懒加载的标志，会自动生成独立的打包chunk。
• 特性模块的路由配置要使用RouterModule.forChild(routes)，根路由使用RouterModule.forRoot(routes)，避免路由冲突。

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