WHAT IS LAZY LOADING IN ANGULAR? || What is module level lazy loading in angular? || How route module & all children routing in angular?

WHAT IS LAZY LOADING IN ANGULAR?

 What is module level lazy loading in angular?

 How route module & all children routing in angular? 

Angular routing and lazy loading both are the same thing. It is very easy. Once you understand the proper way step by step.

1st

app.module.ts

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

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module'; <--Need-->

import { AppComponent } from './app.component'; <--Need-->

import { FirstComponent } from './first/first/first.component';<--Need-->

@NgModule({

  declarations: [

    AppComponent,<--Need-->

    FirstComponent<--Need-->

  ],

  imports: [

    BrowserModule,

    AppRoutingModule <--Need-->

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

app-routing.module.ts

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

import { RouterModule, Routes } from '@angular/router'; <--Auto Import-->

const routes: Routes = [

  { path: 'frist', loadChildren: () =>

import('../app/frist/frist.module').then(m => m.FristModule) }, <--Need-->

  { path: 'second', loadChildren: () =>

import('../app/second/second.module').then(m => m.SecondModule)}, <--Need-->

];

@NgModule({

  imports: [RouterModule.forRoot(routes)], <--Auto Import-->

  exports: [RouterModule] <--Auto Import-->

})

export class AppRoutingModule { }

app.component.html

<button [routerLink]="'/frist'">FRIST CLASS</button><br>

<button [routerLink]="'/second'">SECOND TIMELINE</button><br>

<router-outlet></router-outlet>

frist.module.ts

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

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

import { FristRoutingModule } from './frist-routing.module';

import { FristclassComponent } from './fristclass/fristclass.component';

import { SecondclassComponent } from './secondclass/secondclass.component';

import { ThardclassComponent } from './thardclass/thardclass.component';

import { FirstComponent } from './first/first.component';

<-- You should import all component in this module-->

@NgModule({

  declarations: [

    FristclassComponent,

    SecondclassComponent,

    ThardclassComponent,

    FirstComponent

  ],

  imports: [

    CommonModule,

    FristRoutingModule

  ]

})

export class FristModule { }

frist-routing.module.ts

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

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

import { FirstComponent } from './first/first.component';

import { FristclassComponent } from './fristclass/fristclass.component';

import { SecondclassComponent } from './secondclass/secondclass.component';

import { ThardclassComponent } from './thardclass/thardclass.component';

<-- You should import all component in this routing module-->

const routes: Routes = [

{ path: '', component: FirstComponent , children:[

<--This is the main component which is to control all children's components-->

   { path: 'first', component: FristclassComponent },<--children's components-->

   { path: 'second', component: SecondclassComponent},<--children's components-->

   { path: 'third', component: ThardclassComponent },<--children's components-->

  ] },

];

@NgModule({

  imports: [RouterModule.forChild(routes)],

  exports: [RouterModule]

})

export class FristRoutingModule { }

first.component.html

<button routerLink="first">Go to Frist Class Component</button><br>

<button routerLink="second">Go to Sccond Class Component</button><br>

<button routerLink="third">Go to Thard Class Component</button><br>

<router-outlet></router-outlet>

This is the module folder's basic structure

If you try this in the proper way. you can understand and you can handle

big projects. have any problems let me comment, please.