Angular Routing — Interview Quick Revision

1. What is Angular routing?

Angular Routing allows navigation between different components/views in a Single Page Application (SPA) without reloading the entire page.
Example: /home, /products, /admin

2. How does Angular routing work?

Angular matches the browser URL against configured routes and displays the corresponding component inside <router-outlet>.
{ path: 'products', component: Products }

3. How was routing configured using AppRoutingModule before standalone Angular?

Traditional Angular used an AppRoutingModule that imported RouterModule.forRoot(routes) and exported RouterModule.
imports: [RouterModule.forRoot(routes)]

4. What is RouterModule.forRoot()?

RouterModule.forRoot() configures the application's root-level routes and router services in NgModule-based applications.
RouterModule.forRoot(routes)

5. What is RouterModule.forChild()?

RouterModule.forChild() adds routes for a feature NgModule without creating another root Router service.
RouterModule.forChild(featureRoutes)

6. How is routing configured using provideRouter()?

Modern standalone Angular registers routes using provideRouter(), usually in app.config.ts.
providers: [provideRouter(routes)]

7. What is Routes?

Routes is Angular's type representing an array of route configurations.
export const routes: Routes = [{ path: '', component: Home }];

8. What is router-outlet?

<router-outlet> is a placeholder where Angular displays the component matched by the current route.
<router-outlet></router-outlet>

9. What is routerLink?

routerLink is a directive used to navigate between Angular routes without a full browser page reload.
<a routerLink="/products">Products</a>

10. How do you navigate programmatically using Router?

Inject Router and call navigate() or navigateByUrl().
this.router.navigate(['/products']);

11. What is ActivatedRoute?

ActivatedRoute provides information about the currently active route, including route parameters, query parameters, and route data.
route.paramMap.subscribe(...)

12. How do you pass route parameters?

Define the parameter using :parameterName and include its value in the URL.
Route: { path: 'products/:id', component: ProductDetails } → URL: /products/10

13. How do you read route parameters?

Use ActivatedRoute with paramMap or snapshot.paramMap.
const id = this.route.snapshot.paramMap.get('id');

14. What are query parameters?

Query parameters are optional key-value values added after ? in the URL, commonly used for filtering, sorting, or pagination.
/products?page=2&sort=asc

15. Route parameters vs query parameters — what is the difference?

Route parameter: part of the route path and usually identifies a resource → /products/10.
Query parameter: optional extra information → /products?page=2.

16. What are child routes?

Child routes are nested routes configured under a parent route using the children property.
{ path: 'admin', children: [{ path: 'users', component: Users }] }

17. What is a wildcard route?

A wildcard route ** matches any URL that was not matched by previous routes. It is normally placed last.
{ path: '**', component: NotFound }

18. How do you implement a 404 page?

Create a NotFound component and map it to the wildcard route.
{ path: '**', component: NotFound }

19. What is route lazy loading?

Lazy loading loads route code only when the user navigates to that route, reducing the initial bundle size and improving startup performance.

20. What is loadComponent()?

loadComponent() lazy-loads a standalone component for a route using dynamic import().
{ path: 'products', loadComponent: () => import('./products').then(m => m.Products) }

21. What is loadChildren()?

loadChildren() lazy-loads a group of child routes; traditionally it also lazy-loaded feature NgModules.
loadChildren: () => import('./admin/admin.routes').then(m => m.routes)

22. How was lazy loading implemented with NgModules?

Traditional Angular used loadChildren to dynamically load a feature NgModule.
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)

23. How is lazy loading implemented with standalone components?

Modern Angular can use loadComponent() for a single standalone component or loadChildren() for a standalone route configuration.
loadComponent: () => import('./products').then(m => m.Products)