Chapter 2: Boosting Developer Productivity Through Tooling, Configuration, and Convenience

Across data binding and attribute directives, there are many options to dynamically change styles in an Angular application. Angular Ivy supports multiple styling application programming interfaces (APIs) in a predictable way. This chapter teaches us about Angular Ivy's style binding precedence rules through a simple example that uses almost every possible style API in Angular.

Through a few examples, we will explore how directive and component inheritance and the sharing of metadata have changed in Angular Ivy. Before that, we learn which metadata properties are sharable through inheritance.

Ahead-of-time (AOT) compilation was introduced in one of the first major releases of Angular. Angular Ivy is the first generation to enable it in all phases of the application life cycle—from development through testing to builds. We will discuss how this affects our workflow and bundle size after briefly peeking under the hood of Angular to discuss some of the internal building blocks that have enabled the performance improvements needed to make this change.

The strict mode preset available with Angular Ivy enables additional compile-time checks of our Angular applications as well as bundle optimizations.

Angular Ivy and its supported versions of TypeScript have added significant speed improvements and stricter checks to tests. We will learn about this through examples that are easy to understand.

Angular's compiler analyzes our application code at build time. This is nice, but some of the compiler error messages suffer from missing context. In Angular Ivy, contextual details have been added to several compilation error messages. In this chapter, you will see Ivy compilation error examples compared to compilation errors from earlier generations of Angular as we discuss how it improves the developer experience.

Angular is known for great tooling and support for strong typing through TypeScript. However, we have not been able to type-check all parts of our component templates in the first or second generation of the Angular framework. The Ivy generation completes the component template type-checking story for the Angular framework.

Automated migration schematics are a wonderful piece of tooling that is part of the Angular framework. Since Ivy was released, they include messages with descriptions and an option to run them in separate commits, as we will see in this chapter.

The versions of the Angular Language Service introduced with Angular Ivy have allowed for better integration with integrated development environments (IDEs) such as Visual Studio Code (VS Code). Additional tooltips are added to component templates and additional details have been added to existing tooltips. Syntax highlighting has been added to inline templates and improved for external file templates.

In this second chapter, we are going to cover these topics:

• Using predictable style bindings
• Sharing metadata through directive and component inheritance
• Outputting faster and smaller bundles with AOT compilation
• Taking advantage of strict mode and other new configurations
• Enhancing our Angular testing experience
• Leveling up our developer experience

After finishing this chapter, you can boost your developer productivity by taking advantage of the latest improvements in tooling, configuration, and other Angular features.