Not able to see lazy loaded modules in network tab

Question

I have started converting my angular application from component based to module based to improve the app performance. So for that i have implemented lazy loading and the strange thing is the code works fine for lazy loading and i am able to see the lazy chunk files in the command prompt as below:

But the problem with these modules are not lazy loaded when i try to debug them then all of these modules are loading on initial page laod i.e onload. I mean initial page load i am able to see all these lazy loaded modules. I did some console.log in each module to see whether they are lazy loaded or not. Strangely all are loading on initial page load. This should not be the expected behavior with lazy loading concept.

See below my code snippet:

app-routing.module.ts

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

const AppRoutes: Routes = [
  { path: '', redirectTo: '/app/projects', pathMatch: 'full' },
];

export const AppRoutingModule = RouterModule.forRoot(AppRoutes, { useHash: true, relativeLinkResolution: 'legacy' });

layout-routing.module.ts

 const routes: Routes = [
    { path: '', redirectTo: '/app/projects', pathMatch: 'full' },
    { path: '', loadChildren: () => import('../membership/membership.module').then(m => m.MembershipModule) },
    {
        path: "app",
        component: LayoutComponent,
        canActivate: [AuthGuard],
        children: [
            { path: '', loadChildren: () => import('../security-categories/security-categories.module').then(m => m.SecurityCategoriesModule) },
            { path: '', loadChildren: () => import('../vault/vault.module').then(m => m.VaultModule) },
            { path: '', loadChildren: () => import('../scanners/scanners.module').then(m => m.ScannersModule) },
            { path: '', loadChildren: () => import('../apigateway/apigateway.module').then(m => m.ApigatewayModule) },
            { path: '', loadChildren: () => import('../activities/activities.module').then(m => m.ActivitiesModule) },
            { path: "", redirectTo: "/app/projects", pathMatch: "full" },
            { path: "dashboard", component: DashboardComponent },                
            { path: "projects", component: ProjectsListComponent },    
        ]
    },
    { path: '**', component: ErrorComponent }
];

export const LayoutRoutingModule = RouterModule.forChild(routes);

One module named apigateway.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { MaterialComponentsModule } from '../shared/material-components.module';
import { ApiGatewayRoutes } from './apigateway.routing';
import { ApiGatewayComponent } from './components/api-gateway/api-gateway.component';
import { CloudApiGatewayComponent } from './components/cloud-apigateway/cloud-apigateway.component';
import { ApigatewayDialogCredsComponent } from './components/apigateway-dialog-creds/apigateway-dialog-creds.component';

@NgModule({
  declarations: [
    ApiGatewayComponent,
    CloudApiGatewayComponent,
    ApigatewayDialogCredsComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialComponentsModule,
    RouterModule.forChild(ApiGatewayRoutes)
  ]
})
export class ApigatewayModule { 
  constructor() {
    console.log('ApigatewayModule module');
  }
}

Similarly i have created all the remaining modules but no modules is showing in the network tab when i navigate to a particular modules route which should lazy load. Can anybody help me what was the issue?

Thanks.

AliF50 AliF50 · Accepted Answer · 2021-08-16T15:38:09

I think the issue could be that the paths are getting matched with '' and they are being loaded.

Try the following configuration just for testing purposes:

children: [
            { path: 'abc', loadChildren: () => import('../security-categories/security-categories.module').then(m => m.SecurityCategoriesModule) },
            { path: 'def', loadChildren: () => import('../vault/vault.module').then(m => m.VaultModule) },
            { path: 'ghi', loadChildren: () => import('../scanners/scanners.module').then(m => m.ScannersModule) },
            { path: 'jkl', loadChildren: () => import('../apigateway/apigateway.module').then(m => m.ApigatewayModule) },
            { path: 'mno', loadChildren: () => import('../activities/activities.module').then(m => m.ActivitiesModule) },
            { path: "pqr", redirectTo: "/app/projects", pathMatch: "full" },
            { path: "dashboard", component: DashboardComponent },                
            { path: "projects", component: ProjectsListComponent },    
        ]

And see if they get loaded instantly. If they do, you should also make sure that you are not exporting the modules in index.ts files. I recently fixed an issue similar to this where I was using index.ts for exports and the components were a part of the main bundle. But I think your issue is most likely the path: '' and I would set url values for every lazily loaded module.

Not able to see lazy loaded modules in network tab

1 Answers