Every byte the browser downloads costs time — parse time, network time, memory. A large Angular app can easily ship megabytes of JavaScript, and loading it all up front delays the first meaningful paint. Lazy loading splits the app into chunks that load on demand. The initial bundle contains only what’s needed to render the…

Real apps have hierarchies — a settings page with sub-pages, a dashboard with panels, a shop with categories and products. Flattening all of those into top-level routes would produce hundreds of entries and duplicate the shared layout. Nested routes solve this: child routes render inside a parent’s <router-outlet>, sharing the parent’s template, layout, and state….

A route that always renders the same thing is limited. Real apps pass data through the URL — /users/42 shows user 42, /search?q=hello runs a search, /products?page=2&sort=price paginates and sorts. Angular’s router exposes that data through route parameters and query parameters. Route params are part of the path itself; query params come after the ?….

A single-page application doesn’t have real pages — it swaps views without reloading. Routing is what makes that work. The Angular Router maps URLs to components, renders the matched component in a <router-outlet>, listens for navigation, and keeps the browser’s history in sync. It’s how /users shows the user list, /users/42 shows one user, and…

For most of Angular’s history, dependencies came in through the constructor — constructor(private userService: UserService). It works, it’s explicit, and it’s still supported. But it has friction: subclasses must forward constructor parameters, factory functions can’t use it, and signal-based code doesn’t fit naturally. The inject() function, introduced in Angular 14, changes the model. Instead of…