Angular Routing

Routing refers to loading components based on the URL.

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

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '', redirectTo: '/first-component', pathMatch: 'full' }, // Redirect
  { path: '**', component: PageNotFoundComponent }, // Wildcard Route
];

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

Nesting Routes

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

const routes: Routes = [{ path: 'first-component', component: FirstComponent }];

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

Lazy Loading

Angular preloads all the application modules by default, even those which are not immediately necessary. It leads to big initial bundle sizes and impacts the load time.

Reference

• Common Routing Tasks