A complete modern Angular guide, from the CLI and components to signals, standalone APIs, SSR, state management, performance, testing, and production architecture.
The Angular CDK — Component Dev Kit — is a set of behavior primitives for building UI components. It is the foundation that Angular Material is built on, but it is not Angular Material. The CDK provides the interaction patterns, the accessibility infrastructure, and the low-level mechanics. It does not provide the visual design. When…
Angular and Web Components are two different component models that solve the same problem: packaging reusable UI. Angular components are Angular-specific — they use Angular’s template syntax, dependency injection, and change detection, and they only work inside an Angular application. Web Components are a browser standard — they are native HTML elements that work in…
A Progressive Web App is a web application that uses modern browser capabilities to deliver an experience that feels like a native app. It can work offline, it can be installed on the home screen, it can send push notifications, and it can update itself in the background. Angular provides first-class support for PWAs through…
The previous chapter introduced Progressive Web Apps and the service worker that makes them possible. This chapter goes deeper into the service worker itself: what it is, how it intercepts requests, how Angular’s implementation differs from a hand-written one, and how to debug it when the cache is serving stale content or the update mechanism…
Every Angular application has a change detection cycle. When something changes — a user clicks a button, an HTTP response arrives, a timer fires — Angular checks whether the data that templates depend on has changed, and if it has, it updates the DOM. The cycle is the engine of the framework. It is also…
The previous chapter covered change detection and rendering — the work Angular does while the application is running. This chapter covers the work that happens before the application runs: downloading, parsing, and executing the JavaScript, CSS, and assets that make up the application. A fast application is not just one that renders efficiently. It is…
The previous chapter covered bundle sizes and the loading techniques that reduce them. This chapter goes deeper into the specific strategies for loading code on demand. Lazy loading is not a single technique. It is a family of strategies: route-level lazy loading with loadComponent and loadChildren, component-level deferral with @defer, and the preloading strategies that…
A production build is not just a minified version of the development build. It is a different artifact. The bundler removes code that is never used, renames variables to shorter names, and splits the application into chunks. The process that removes the unused code is called tree shaking. The process that finds what is left…
Images and fonts are the two heaviest static resources in most Angular applications. A single unoptimized hero image can weigh more than the entire JavaScript bundle. A web font that arrives late causes text to flicker and shift. The NgOptimizedImage directive was introduced in Angular 16 to automate image loading best practices, and font optimization…
Every Angular application that ships without tests is an application that ships with unknown defects. The tests are the specification. They describe what the code is supposed to do. When the code changes, the tests tell you whether the change broke something. When a new developer joins the team, the tests are the documentation of…