Angular 17 and 18 Routing and Lazy Loading Standalone Components

Routing in Angular is an essential feature that allows developers to create single-page applications with multiple views and navigation between them. Angular’s powerful routing module provides developers with the ability to define routes, load components based on those routes, handle URL changes, and navigate between views without a full page reload.

In this tutorial, we will cover how to set up routing in Angular 17 and 18, as well as how to lazy load standalone components to improve the performance of your Angular application.

Routing in Angular 17 and 18:

1. Setting up routing module:
   To get started with routing in Angular, you first need to import the RouterModule from the @angular/router package in your AppModule. You can do this by adding the following code in your app.module.ts file:

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

const routes: Routes = [
  // Define your routes here
];

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

1. Defining routes:
   Next, you need to define the routes for your application. You can do this by creating an array of route objects in the routes constant that we created earlier. Each route object should have a path and a component property, which specifies the component that should be loaded when the route is matched.

Here’s an example of how you can define routes in Angular:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent },
];

1. Router outlet:
   To render the component based on the active route, you need to add the directive in your app.component.html file. This directive tells Angular to render the component associated with the current route.

Here’s how you can add the in your app.component.html file:

<router-outlet></router-outlet>

1. Navigation:
   To navigate between routes in your Angular application, you can use the routerLink directive in your HTML templates. The routerLink directive takes a path as its input and navigates to the specified route when clicked.

Here’s an example of how you can use the routerLink directive in your app.component.html file:

<a routerLink="/home">Home</a>
<a routerLink="/about">About</a>

Lazy loading standalone components:

Lazy loading is a technique used to load modules or components only when they are required, rather than loading them all at once when the application starts. Lazy loading can significantly improve the performance of your Angular application by reducing the initial load time.

To lazy load standalone components in Angular, you can follow these steps:

1. Create a separate module for the lazily loaded component:
   First, create a new Angular module that defines the component you want to lazy load. This module should import the CommonModule and the component itself.

Here’s an example of how you can create a lazily loaded module in Angular:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyLoadedComponent } from './lazy-loaded.component';

@NgModule({
  declarations: [LazyLoadedComponent],
  imports: [CommonModule],
})
export class LazyLoadedModule {}

1. Define a route for the lazily loaded component:
   Next, define a route for the lazily loaded component in the routes array in your AppModule. Instead of directly importing the component, import the module containing the component using the loadChildren property.

Here’s an example of how you can define a route for a lazily loaded component in Angular:

const routes: Routes = [
  { path: 'lazy', loadChildren: () => import('./lazy-loaded/lazy-loaded.module').then((m) => m.LazyLoadedModule) },
];

1. Add a link to navigate to the lazily loaded component:
   To navigate to the lazily loaded component, you can use the routerLink directive in your HTML templates as shown earlier in this tutorial. Just specify the path for the lazily loaded component route.

Here’s an example of how you can add a link to navigate to the lazily loaded component in your app.component.html file:

<a routerLink="/lazy">Lazy Loaded Component</a>

By following these steps, you can easily set up routing in Angular 17 and 18, as well as lazy load standalone components to improve the performance of your Angular application. Routing and lazy loading are essential features in Angular that can help you build efficient and scalable single-page applications.