Angular Standalone Component Routing

Angular Standalone Component Routing

Angular standalone components are a recent addition to the Angular framework, offering a streamlined approach to component creation without the need for a dedicated NgModule. This simplifies code maintenance and development. Among the many advantages of standalone components is their ease of use when it comes to implementing routing, eliminating the need for excessive boilerplate code.

In traditional Angular development, routing required creating a routing module for each component that needed routing capabilities. This approach could lead to code redundancy and decreased clarity.

With standalone components, routing can be defined directly within the component itself, enhancing code conciseness and comprehension.

To configure routing for a standalone component, follow these steps:

  • Import RouterModule from the @angular/router package.
  • Add RouterModule to the imports array of your component.
  • Define your routes in the routes property of your component.
  • Include a <router-outlet> element in your component template.

Here's an example of a standalone component with routing:

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

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [RouterModule.forRoot(routes)],
  template: `
    <h1>My App</h1>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {}

In this example, two routes, "home" and "about," are defined. The <router-outlet> element in the template specifies where Angular should render the component associated with the current route.

Additionally, you can implement lazy loading to load components only when they are required, enhancing application performance.

To lazy load a standalone component, use the loadComponent function from RouterModule. This function accepts a module factory as an argument and returns a component instance. Here's how to do it:

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

const routes: Routes = [
  {
    path: 'lazy',
    loadComponent: () => import('./lazy.component').then((m) => m.LazyComponent),
  },
];

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [RouterModule.forRoot(routes)],
  template: `
    <h1>My App</h1>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {}

This code defines a route for a lazy-loaded component. When users navigate to this route, Angular dynamically loads the component module and renders the component.

In conclusion, Angular standalone component routing offers a powerful and flexible way to implement routing in Angular applications. It streamlines code, enhances performance, and simplifies development, making it a valuable addition to your Angular development toolkit.

  • Date: