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