Angular 14.2.8懒加载未生成代码块问题求助

我是Angular新手，尝试实现懒加载功能，但加载过程中看不到对应的独立代码块（chunks）。

项目结构 #

项目包含FeaturesModules目录，内部有HomeComponent、SignupComponent组件，以及feature.module和feature.routing.module文件。

相关代码 #

Feature路由模块（feature.routing.module） #

import { Injectable, NgModule } from '@angular/core';
import { Routes, RouterModule} from '@angular/router';
import { HomeComponent } from './HomeComponent/home-component.component';
const routes: Routes = [
    { path: "", component: HomeComponent, children:[
        { path: "home", component: HomeComponent }
    ]},
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class FeatureRoutingModule {

}

Feature模块（feature.module） #

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { HomeComponent } from "./HomeComponent/home-component.component";
import { FeatureRoutingModule } from "./feature.routing.module";
import { Signup } from "./SignupComponent/signup.component";

@NgModule({
imports: [FeatureRoutingModule ,CommonModule, ReactiveFormsModule],
declarations:[Signup , HomeComponent]
})

export class FeatureModule {

}

App路由模块（app-routing.module） #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CatalogComponentComponent } from './catalog/catalog-component/catalog-component.component';

const route1: Routes=[
  {path:'catalog' , component: CatalogComponentComponent},
  {path: 'home' ,  loadChildren: ()=> import('./FeaturesModules/feature.module').then(m=>m.FeatureModule)}
]

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

App模块（app.module） #

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HeaderComponentComponent } from './shared/header-component/header-component.component';

import { HttpClientModule } from '@angular/common/http';
import { FeatureModule } from './FeaturesModules/feature.module';
import { CatalogComponentComponent } from './catalog/catalog-component/catalog-component.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponentComponent,
    CatalogComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    FeatureModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题原因及修复方案 #

核心问题 #

你在AppModule的imports数组中直接导入了FeatureModule，这会导致Angular在应用启动时就加载该模块的所有代码，完全绕过了懒加载的逻辑。懒加载的核心要求是不在主模块中提前导入目标模块，仅通过路由的loadChildren动态加载。

修复步骤 #

1. 移除AppModule中的FeatureModule导入
   修改AppModule的imports数组，删除FeatureModule：

   imports: [
     BrowserModule,
     AppRoutingModule,
     ReactiveFormsModule,
     HttpClientModule
     // 移除FeatureModule
   ],
   

2. 优化Feature路由配置（可选）
   当前Feature路由中存在路径冗余，根路径和子路径都指向同一个组件，可调整为：

   const routes: Routes = [
     { path: "", component: HomeComponent },
     // 若需要注册页面路由，可添加：
     // { path: "signup", component: Signup }
   ];
   

   这样访问/home时，懒加载模块的根路由会正确匹配并渲染HomeComponent。

3. 验证懒加载效果

   • 启动开发服务器：ng serve
   • 打开浏览器开发者工具的Network标签
   • 首次加载仅会加载主应用代码；导航到/home时，会看到新的代码块（如features-modules-feature-module.js）被动态加载。若开发环境下效果不明显，可使用生产模式启动：ng serve --prod，生产模式的代码拆分更清晰。

额外注意事项 #

• 确保Angular版本支持懒加载（Angular 8+推荐使用当前的箭头函数语法）
• 懒加载模块需为独立NgModule，不要在其他模块中提前导入其组件或服务（共享模块除外）

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