A complete modern Angular guide, from the CLI and components to signals, standalone APIs, SSR, state management, performance, testing, and production architecture.
The previous chapter covered the testing infrastructure: Jasmine for the test syntax, Karma for the test runner, TestBed for the testing module, and ComponentFixture for the component wrapper. This chapter goes deeper into the two most common kinds of tests in an Angular application: component tests and service tests. They are different because components have…
The previous chapters covered the testing infrastructure: Jasmine, Karma, TestBed, and ComponentFixture. They showed how to write component tests and service tests. This chapter goes deeper into the TestBed itself — the tool that configures the dependency injection context for every test. Understanding TestBed is understanding how Angular’s dependency injection works in the testing environment….
The previous chapters covered the testing infrastructure and the component and service testing patterns. This chapter covers the two hardest parts of testing an Angular application: asynchronous behavior and signals. An async test that does not wait for the operation to complete will assert on stale data. A signal test that does not trigger change…
Playwright is a modern end-to-end testing framework built by Microsoft. It runs tests in real browsers — Chromium, Firefox, and WebKit — and it is designed around a set of principles that make tests reliable: auto-waiting, web-first assertions, and test isolation. Angular has embraced Playwright as a first-class E2E testing solution through a set of…
Cypress is the E2E testing framework that the Angular team officially recommends for end-to-end testing. It runs in a real browser, executes the test code in the same run loop as the application, and provides a test runner that shows exactly what happened at every step. The ng add @cypress/schematic command is the official Angular…
Angular DevTools is a browser extension that provides debugging and profiling capabilities specifically for Angular applications. It integrates directly into Chrome and Firefox developer tools, adding an “Angular” tab that exposes the framework’s internal state in a way that generic browser DevTools cannot. The extension is maintained by the Angular team and is available for…
A bug appears in an Angular application. The component does not render. The signal does not update. The HTTP request returns the wrong data. The route does not activate. The change detection cycle does not run. Debugging is the process of finding the cause and fixing it. Angular provides a set of tools and techniques…
The Angular Language Service is the tool that gives editors and IDEs a real understanding of Angular templates. Without it, an HTML file is just text. With it, the editor knows that user in {{ user.name }} refers to a component property, that app-user-card is a component selector, and that binding to an unknown property…
An Angular application runs in more than one place. It runs on a developer’s laptop, on a staging server, and in production. Each environment has different settings: a different API URL, a different feature flag state, a different logging level. The application code should not change between environments. Only the configuration should. Environment configuration is…
An Angular application is not the same in development as it is in production. The development build is large, readable, and optimized for fast rebuilds. The production build is small, minified, and optimized for fast delivery to the user. The difference between the two is the build configuration. The Angular CLI applies a set of…