Summary

In this chapter, we learned how Angular Ivy boosts our developer productivity through even better tooling and predictable APIs. We started out by learning the many ways of binding styles to elements using Angular Ivy. Through a comprehensive example, we saw how the order of style bindings does not matter. However, we learned that the type of style binding matters as it follows a precedence or priority defined by Angular Ivy. This makes the resolution of multiple style bindings predictable, which is important for implementing certain complex use cases. Finally, we discussed that this change was necessary because Ivy does not guarantee the order in which directives and data bindings are applied.

Ivy requires Directive and Component decorators on base classes that rely on Angular features, such as input and output properties or child queries. We learned how this results in a pattern that makes it easy to share metadata through inheritance in a predictable way.

To learn how Ivy's AOT compiler is faster and, for certain Angular projects, produces smaller bundles, we discussed how a lot of the internals were rewritten between View Engine and Ivy. We learned how the Ivy Instruction Set is a good fit for tree shaking to remove the parts of the framework that are unused by our applications.

With this chapter completed, you now know how Angular's strict mode preset and other configurations allow us to catch errors sooner, resulting in a more robust code base.

We discussed how Angular Ivy significantly improves the testing experience as it introduces major speed improvements and useful test utilities. We saw examples of how TypeScript allows us to expect a type error in tests to create APIs that are more robust at runtime. We discussed how AOT compilation is enabled in tests to reduce the gap between tests and runtime. This can significantly improve developer feedback when implementing tests and application code.

Not only did Ivy improve our testing experience, but it is also a productivity booster when it comes to the overall developer experience. This chapter compared compiler error messages from View Engine to the same type of error messages in Ivy to demonstrate the additional context they include. We discussed how strict template type checking finalizes type checking in component templates.

We briefly discussed how Ivy improves the update experience through messages that are output during automated migrations and how we can use the --create-commits parameter flag to split the automated migrations into individual Git commits.

We ended by discussing most of the improvements in Angular's IDE integrations, such as the new invalid template and style URL errors, tooltips displaying and declaring Angular modules, and syntax highlighting for inline component templates and styles.

Chapter 3, Introducing CSS Custom Properties and New Provider Scopes, and Chapter 4, Exploring Angular Components Features, are going to prepare you for the Ivy features you are going to need to implement features on an existing Angular application in Part 2, Build a Real-World Application with the Angular Ivy Features You Learned. We will discuss topics such as CSS Custom Properties, the Clipboard API, component testing harnesses, and the platform provider scope, all in the context of Angular.