Angular 14.2.8 Lazy Loading not creating Chunks

Question

I'm rather new to Angular and have tried implementing Lazy Loading but unable to see chunks while loading

here is my project structure :

[![enter image description here][2]][2]

my code as follows: features 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 {

}

features 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],// importing loaded childs here
declarations:[Signup , HomeComponent]// declaring components here
})

export class FeatureModule {

}

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-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 { }
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 { }

edit : updated app routing module module path [1]: https://i.sstatic.net/NqlgR.png [2]: https://i.sstatic.net/S7GPS.png [3]: https://i.sstatic.net/fHR4F.png [4]: https://i.sstatic.net/gB60q.png [5]: https://i.sstatic.net/mNp3e.png [6]: https://i.sstatic.net/oz3qg.png

Answer 1

You shouldn't define feature modules into app module, it will defeat the purpose of lazy-loading.

Here in your code:

@NgModule({
imports: [FeatureModule ]
bootstrap: [AppComponent]
})
export class AppModule { }

https://github.com/kmohan0910/farm.io/blob/84aadadac987a48ac766a191008cb0f4b1b2b761/src/app/app.module.ts#L27

Answer 2

As per your implementation in your parent module only one route is define which is home module so when your application load at that time when you click home Route then FeatureModule invoke aspect of that module.

If you want to test lazy loading then add some other route in app.routing module and when app load at that time lazy module not getting load but when you click route of lazy load modue then get the lazy load module