Lazy Loading implemented but anyhow it made my app slower and response time increased

I have implemented the lazy loading but since then it has made my app too slow that at one click my app does not navigate to other page now. It takes 2 clicks when need to perform any action.

loaninfo.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { LoaninfoRoutingModule } from './loaninfo-routing.module';
import { LoaninfoComponent } from './loaninfo.component';


@NgModule({
declarations: [
LoaninfoComponent
],
imports: [
CommonModule,
LoaninfoRoutingModule
]
})
export class LoaninfoModule { }



loaninfo-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoaninfoComponent } from './loaninfo.component';

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

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



app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { CdashboardComponent } from './components/cdashboard/cdashboard.component';
import { LoanoverviewComponent } from './components/loanoverview/loanoverview.component';
import { LoaninfoComponent } from './components/loaninfo/loaninfo.component';

const routes: Routes = [
{path:'', component: LoginComponent, pathMatch:'full'},
{path:'cdashboard', component: CdashboardComponent },
{ path: 'cdashboardl', loadChildren: () => import('./components/cdashboard/cdashboard.module').then(m => m.CdashboardModule) },
{path:'loanoverview', component: LoanoverviewComponent },
{ path: 'loanoverviewl', loadChildren: () => import('./components/loanoverview/loanoverview.module').then(m => m.LoanoverviewModule) },
{path:'loaninfo', component: LoaninfoComponent },
{ path: 'loaninfol', loadChildren: () => import('./components/loaninfo/loaninfo.module').then(m => m.LoaninfoModule) },
{
path: '',
redirectTo: '',
pathMatch: 'full'
}

];

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



I am navigating like this:

<a href="#" class="nav-link text-light px-4 fs-6" routerLink="/loaninfol">Linesheets</a>

Continue reading...