Lazy Loading in Angular 17 - Standalone - Routing

             Here, we are going to see how to implement Lazy Loading in Angular 17 with standalone components. For that we need to do some configuration in our Component.ts file in which component we using routerLink attribute.

Step - 1 : Create the routes we need to call and also our lazy loading component

Syntax for Lazy load : 

        export const routes: Route = [

            { path: 'path-name', loadComponent: () => import(' path-of-the-lazy-loading-component ').then(d                         => d.lazy-load-component-name) },

        ]

import { Route } from '@angular/router';

import { FirstcomponentComponent } from './firstcomponent/firstcomponent.component';

export const routes: Route[] = [

  { path: 'first', component: FirstcomponentComponent},

  { path: 'databinding', loadComponent: () =>

        import('./databinding/databinding.component')

            .then(d => d.DatabindingComponent) },

  { path: '', redirectTo: 'first', pathMatch: 'full' },

  { path: '**', redirectTo: 'first', pathMatch: 'full' }

];

Step - 2 : Import the necessary class first in component.ts file 

import { Component, Inject, PLATFORM_ID } from '@angular/core

import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';

@Component({

  selector: 'app-root',

  standalone: true,

  imports: [RouterOutlet, RouterLink, RouterLinkActive],

  templateUrl: './app.component.html',

  styleUrl: './app.component.css',

})

export class AppComponent {

  title = 'Lazy Loading Example';

}

Step - 3 : Call the routers in component.html file

Hope this is helpful to you guys, still if you guys need more support Click Here Join this Telegram channel and get clear your doubts.