Sign in
Skip to solution
mediumFrontend

How does routing and lazy loading work in Angular?

156 views
01

Understand the problem

Explain the Router and lazy loading.

routing
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

The Router maps URL paths to components via a route config. Lazy loading uses loadChildren/loadComponent to load a feature's bundle only when its route is visited, shrinking the initial bundle and speeding first load.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Routes with a lazy-loaded component
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users/:id', component: UserComponent },
  {
    path: 'admin',
    // loaded only when /admin is visited → separate chunk
    loadComponent: () => import('./admin.component').then(m => m.AdminComponent),
  },
  { path: '**', redirectTo: '' },   // wildcard / not-found
];

// bootstrapApplication(App, { providers: [provideRouter(routes)] });
class HomeComponent {} class UserComponent {}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 77 of 121 decoded in the Angular track. One more won't hurt.

Back to track