<\/p>\n
Updated July 4, 2026.<\/strong> Refreshed for Angular 21 and current SEO best practices.<\/p>\n<\/div>\n<\/p>\n\nTable of Contents<\/h2>\nFollow the Angular tutorial series in order:<\/p>\n\nLesson 1: Angular Tutorial \u2014 Introduction (2026)<\/a><\/li>\nLesson 2: Angular CLI Setup \u2014 Create Your First App (Angular 21+)<\/a><\/li>\nLesson 3: Angular Components and Templates \u2014 Build Your First UI<\/a><\/li>\nLesson 4: Angular Routing \u2014 Navigate Between Pages (Angular 21+)<\/strong><\/li>\nLesson 5: Angular Services and Dependency Injection (Angular 21+)<\/a><\/li>\nLesson 6: Angular HTTP Client \u2014 Fetch Data from APIs (Angular 21+)<\/a><\/li>\nLesson 7: Angular Forms \u2014 Reactive Forms and Signal Forms Preview (Angular 21+)<\/a><\/li>\n\u2190 Back to Angular Tutorial hub<\/a><\/li>\n<\/ol>\n<\/nav>\n<\/p>\n\nAngular 21 Notes<\/h4>\nAngular 21 uses provideRouter(routes)<\/code> in app.config.ts<\/code> and routerLink<\/code> for navigation \u2014 no NgModule router imports required.<\/p>\n<\/div>\nThis lesson covers Angular routing<\/strong> with @angular\/router<\/code> \u2014 how users move between pages in a single-page application without full browser reloads. You will configure routes, link with routerLink<\/code>, read route parameters, and preview lazy-loaded feature modules.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20133 with a local Angular 21 app (routing enabled at ng new<\/code>). Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n1. Why Routing Matters<\/h4>\nSPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
<\/p>\n\nTable of Contents<\/h2>\nFollow the Angular tutorial series in order:<\/p>\n\nLesson 1: Angular Tutorial \u2014 Introduction (2026)<\/a><\/li>\nLesson 2: Angular CLI Setup \u2014 Create Your First App (Angular 21+)<\/a><\/li>\nLesson 3: Angular Components and Templates \u2014 Build Your First UI<\/a><\/li>\nLesson 4: Angular Routing \u2014 Navigate Between Pages (Angular 21+)<\/strong><\/li>\nLesson 5: Angular Services and Dependency Injection (Angular 21+)<\/a><\/li>\nLesson 6: Angular HTTP Client \u2014 Fetch Data from APIs (Angular 21+)<\/a><\/li>\nLesson 7: Angular Forms \u2014 Reactive Forms and Signal Forms Preview (Angular 21+)<\/a><\/li>\n\u2190 Back to Angular Tutorial hub<\/a><\/li>\n<\/ol>\n<\/nav>\n<\/p>\n\nAngular 21 Notes<\/h4>\nAngular 21 uses provideRouter(routes)<\/code> in app.config.ts<\/code> and routerLink<\/code> for navigation \u2014 no NgModule router imports required.<\/p>\n<\/div>\nThis lesson covers Angular routing<\/strong> with @angular\/router<\/code> \u2014 how users move between pages in a single-page application without full browser reloads. You will configure routes, link with routerLink<\/code>, read route parameters, and preview lazy-loaded feature modules.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20133 with a local Angular 21 app (routing enabled at ng new<\/code>). Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n1. Why Routing Matters<\/h4>\nSPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
Follow the Angular tutorial series in order:<\/p>\n
Angular 21 uses provideRouter(routes)<\/code> in app.config.ts<\/code> and routerLink<\/code> for navigation \u2014 no NgModule router imports required.<\/p>\n<\/div>\nThis lesson covers Angular routing<\/strong> with @angular\/router<\/code> \u2014 how users move between pages in a single-page application without full browser reloads. You will configure routes, link with routerLink<\/code>, read route parameters, and preview lazy-loaded feature modules.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20133 with a local Angular 21 app (routing enabled at ng new<\/code>). Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n1. Why Routing Matters<\/h4>\nSPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
provideRouter(routes)<\/code> in app.config.ts<\/code> and routerLink<\/code> for navigation \u2014 no NgModule router imports required.<\/p>\n<\/div>\nThis lesson covers Angular routing<\/strong> with @angular\/router<\/code> \u2014 how users move between pages in a single-page application without full browser reloads. You will configure routes, link with routerLink<\/code>, read route parameters, and preview lazy-loaded feature modules.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20133 with a local Angular 21 app (routing enabled at ng new<\/code>). Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n1. Why Routing Matters<\/h4>\nSPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
app.config.ts<\/code> and routerLink<\/code> for navigation \u2014 no NgModule router imports required.<\/p>\n<\/div>\nThis lesson covers Angular routing<\/strong> with @angular\/router<\/code> \u2014 how users move between pages in a single-page application without full browser reloads. You will configure routes, link with routerLink<\/code>, read route parameters, and preview lazy-loaded feature modules.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20133 with a local Angular 21 app (routing enabled at ng new<\/code>). Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n1. Why Routing Matters<\/h4>\nSPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
routerLink<\/code> for navigation \u2014 no NgModule router imports required.<\/p>\n<\/div>\nThis lesson covers Angular routing<\/strong> with @angular\/router<\/code> \u2014 how users move between pages in a single-page application without full browser reloads. You will configure routes, link with routerLink<\/code>, read route parameters, and preview lazy-loaded feature modules.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20133 with a local Angular 21 app (routing enabled at ng new<\/code>). Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n1. Why Routing Matters<\/h4>\nSPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
This lesson covers Angular routing<\/strong> with @angular\/router<\/code> \u2014 how users move between pages in a single-page application without full browser reloads. You will configure routes, link with routerLink<\/code>, read route parameters, and preview lazy-loaded feature modules.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20133 with a local Angular 21 app (routing enabled at ng new<\/code>). Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n1. Why Routing Matters<\/h4>\nSPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
@angular\/router<\/code> \u2014 how users move between pages in a single-page application without full browser reloads. You will configure routes, link with routerLink<\/code>, read route parameters, and preview lazy-loaded feature modules.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20133 with a local Angular 21 app (routing enabled at ng new<\/code>). Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n1. Why Routing Matters<\/h4>\nSPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
routerLink<\/code>, read route parameters, and preview lazy-loaded feature modules.<\/p>\nPrerequisites:<\/strong> Lessons 1\u20133 with a local Angular 21 app (routing enabled at ng new<\/code>). Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n1. Why Routing Matters<\/h4>\nSPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
Prerequisites:<\/strong> Lessons 1\u20133 with a local Angular 21 app (routing enabled at ng new<\/code>). Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n1. Why Routing Matters<\/h4>\nSPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
ng new<\/code>). Estimated time:<\/strong> 45\u201355 minutes.<\/p>\n1. Why Routing Matters<\/h4>\nSPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
SPAs load one HTML shell and swap views in place. Angular Router maps URLs like \/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
\/products\/42<\/code> to components, updates the browser history, and supports deep links \u2014 essential for bookmarks, SEO (with SSR), and back-button behavior.<\/p>\nPhoto by Hal Gatewood<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n2. Define Routes in app.routes.ts<\/h4>\nAngular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
Angular 21 standalone apps define routes in src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
src\/app\/app.routes.ts<\/code>:<\/p>\nimport { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
import { Routes } from '@angular\/router';\nimport { Home } from '.\/home\/home';\nimport { About } from '.\/about\/about';\n\nexport const routes: Routes = [\n { path: '', component: Home, title: 'Home' },\n { path: 'about', component: About, title: 'About' },\n { path: '**', redirectTo: '' },\n];\n<\/code><\/pre>\nRegister routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
Register routes in app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
app.config.ts<\/code> with provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
provideRouter(routes)<\/code> (already present if you chose routing at scaffold time).<\/p>\nPhoto by Florian Olivo<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n3. router-outlet and routerLink<\/h4>\nPlace the outlet where routed components render:<\/p>\n<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
Place the outlet where routed components render:<\/p>\n
<nav>\n <a routerLink=\"\/\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{ exact: true }\">Home<\/a>\n <a routerLink=\"\/about\" routerLinkActive=\"active\">About<\/a>\n<\/nav>\n<router-outlet \/>\n<\/code><\/pre>\nImport RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
Import RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
RouterLink<\/code> and RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
RouterLinkActive<\/code> in your standalone shell component.<\/p>\n4. Route Parameters<\/h4>\n\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
\/\/ routes\n{ path: 'products\/:id', component: ProductDetail }\n\n\/\/ product-detail.ts\nimport { Component, input } from '@angular\/core';\n\n@Component({\n selector: 'app-product-detail',\n standalone: true,\n template: `<h2>Product {{ id() }}<\/h2>`,\n})\nexport class ProductDetail {\n id = input.required<string>({ alias: 'id' }); \/\/ route param binding (Angular 21+)\n}\n<\/code><\/pre>\nAlternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
Alternatively use ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
ActivatedRoute<\/code> or the inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
inject()<\/code> API with toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
toSignal(route.paramMap)<\/code> for async param streams.<\/p>\n5. Lazy Loading (Preview)<\/h4>\n{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
{\n path: 'admin',\n loadComponent: () => import('.\/admin\/admin').then(m => m.Admin),\n}\n<\/code><\/pre>\nLazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
Lazy routes download code only when visited \u2014 critical for large enterprise apps. We expand this pattern in advanced tutorials on munonye.com<\/a>.<\/p>\n6. Next Steps<\/h4>\nContinue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
Continue to Lesson 5 \u2014 Services and Dependency Injection<\/a> to share data and API clients across routed components.<\/p>\nFrequently Asked Questions<\/h4>\nWhat is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
What is Angular Router?<\/strong>\nThe official routing library for Angular that maps URLs to components and manages navigation inside SPAs.<\/p>\nDo I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
Do I still need NgModules for routing?<\/strong>\nNo. Angular 21 uses standalone components with provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
provideRouter<\/code> and loadComponent<\/code> for lazy loading.<\/p>\n\n
loadComponent<\/code> for lazy loading.<\/p>\n\n
\n