What this book covers
Chapter 1, Discovering New APIs and Language Syntax, first dives into three important additions to TypeScript in versions supported by Angular Ivy. The optional chaining and nullish coalescing operators are discussed and shown in a business context separately. Perhaps more importantly, their powerful combination is demonstrated.
This chapter goes on to optimize regional support through Angular Ivy's improved globalization APIs, briefly discussing how to configure the Angular CLI to bundle locale data and translation files. Together, we implement a bi-directional media directive for art direction and combine it with a locale picker that lazily loads any locale supported by Angular. This is a testament to the power of combining Angular with browser APIs.
Testability is an important concern for Angular. This chapter is where we uncover how Angular's TestBed.inject method adds stronger typing to tests by exploring its API and a simple example. Additionally, we use an example to learn about Angular Material's FakeMatIconRegistry stub service and how it is provided in an Angular testing module.
Chapter 2, Boosting Developer Productivity Through Tooling, Configuration, and Convenience, discusses Angular Ivy's style binding precedence rules and how they make style evaluation predictable. An elaborate example lets us explore these rules.
This chapter discusses which metadata can be shared through directive and component inheritance. This is covered through examples that demonstrate realistic use cases.
The Angular Ahead-of-Time compiler and the Angular Compatibility Compiler are introduced as an integral part of Angular Ivy, affecting all phases of development.
This chapter also discusses Angular Ivy's Strict mode and related compiler options. We also cover TypeScript's error-expecting compiler annotations, which are useful for unit tests.
Finally, Angular Ivy's improved compilation errors are demonstrated and compared to those of Angular View Engine. Additionally, we discuss tooltips added to the Angular Language Service by Ivy.
Chapter 3, Introducing CSS Custom Properties and New Provider Scopes, introduces CSS Custom Properties and their scoping before demonstrating novel techniques for interacting with CSS Custom Properties through Angular data binding.
Angular Ivy introduces the any and platform provider scopes. Both new provider scopes have limited but important and advanced use cases. Each of them is discussed in detail and example dependency hierarchies are visualized to facilitate understanding. To understand an important use case of the any provider scope, a web API configuration example is covered step by step. The platform provider scope is useful for Angular Elements web components and Angular microfrontends. A partial microfrontend is introduced to demonstrate how dependency injection works when using the platform provider scope.
Chapter 4, Exploring Angular Components Features, covers novel APIs and packages introduced by Ivy to Angular's UI packages owned by the Angular Components team. Through extensive API references and basic examples, you will learn about the Angular YouTube Player and the most common parts of the Angular Google Maps components package. The Clipboard API is added to Angular CDK by Ivy. We discuss the directive, service, and class it contains.
Finally, Angular's new test-as-a-user API, known as component harnesses, is explored. The basic concepts harness environments, harness loaders, and component harnesses are introduced. We walk through the Angular Material Button component harness API before using it in practice for an example component that also relies on the Angular Material Select component harness.
Chapter 5, Using CSS Custom Properties, introduces the Angular Academy app and shows how to create a theme component that can control the look and feel of the app using CSS Custom Properties. Furthermore, the chapter discusses how to use CSS Custom Properties for a flexible grid layout.
Chapter 6, Using Angular Components, walks through how the Angular Academy app is structured and shows how to implement and use the new Angular components in a modular fashion.
Chapter 7, Component Harnesses, further dives into the details of the Angular testing harnesses and how to apply the Material testing harnesses in the context of the Angular Academy app. A custom Video Test harness is introduced to illustrate how to approach layered testing in the context of the Angular Academy app.
Chapter 8, Additional Provider Scopes, illustrates how to use the any provider scope to implement a configurable ThemeService in the context of the Angular Academy app. Additionally, we show how to share information across applications using the platform provider scope.
Chapter 9, Debugging with the New Ivy Runtime APIs, first describes Angular Ivy's debugging API in full. However, it is the most widely applicable debugging utility functions, ng.applyChanges, ng.getComponent, ng.getContext, and ng.getListeners, that are covered in detail by debugging a component and its related directive. This will teach you how to inspect an active component as well as its event listeners and embedded view context. These are important techniques to master when developing Angular applications.
Chapter 10, Using the Angular Compatibility Compiler, introduces the Angular Compatibility Compiler and discusses its role as a temporary part of Angular Ivy throughout the Angular View Engine to Ivy transition period. Significant parameters for its CLI are described before recommendations are made to optimize the compiler for local development.
This chapter further discusses Angular Compatibility Compiler optimization techniques for CI/CD workflows and monorepo workspaces as a result of extensive research, experiments, and measurements.
Chapter 11, Migrating Your Angular Application from View Engine to Ivy, is a unique and extensive migration guide for Angular Ivy. First, we discuss the phases and tools used in the Angular update process and how to manage Angular dependencies. Next, we discuss how to perform automated Angular Ivy migrations and how to review the most significant during or after Ivy migration. Additionally, an optional but recommended migration is described.
This chapter recommends manual Ivy migrations to future-proof your Angular application. These migrations are related to navigation, change detection, and unit tests.
Chapter 12, Embracing Ahead-of-Time Compilation, focuses on the Ahead-of-Time Angular compiler. We discuss its impact on all phases of developing your Angular application before introducing techniques for dealing with concrete limitations and edge cases of Ahead-of-Time compilation.
This chapter contains a unique section that introduces two techniques for initializing asynchronous dependencies. We use feature flags as a case study for this.