Accelerating Angular Development with Ivy

Lars Gyrup Brink Nielsen, Jacob Andresen, Santosh Yadav

• Publisher: Packt Publishing
• Year: 2021
• eBook ISBN: 9781800201088
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Development
• Index: Computer Science

Get a comprehensive introduction to the major Angular framework rewrite known as Angular IvyKey Features• Upgrade your Angular applications from traditional View Engine to modern Angular Ivy• Get a detailed walkthrough of the new features and breaking changes in Angular• Explorer new Angular APIs, syntax, tooling, and configurations for modern frontend web developmentBook DescriptionAngular Ivy is the latest rendering engine and compiler introduced in Angular. Ivy helps frontend developers to make their Angular applications faster, better optimized, and more robust. This easy-to-follow guide will help you get to grips with the new features of Angular Ivy and show you how to migrate your Angular apps from View Engine to Ivy. You'll begin by learning about the most popular features of Angular Ivy with the help of simple stand-alone examples and realize its capabilities by working on a real-world application project. You'll then discover strategies to improve your developer workflow through new debugging APIs, testing APIs, and configurations that support higher code quality and productive development features. Throughout the book, you'll explore essential components of Angular, such as Angular Component Dev Kit (CDK), Ahead-of-time (AOT) compilation, and Angular command line interface (CLI). Finally, you'll gain a clear understanding of these components along with Angular Ivy which will help you update your Angular applications with modern features. By the end of this Angular Ivy book, you will learn about the core features of Angular Ivy, discover how to migrate your Angular View Engine application, and find out how to set up a high-quality Angular Ivy project.What you will learn• Find out why Angular Ivy tests are faster and more robust• Explore the concept of CSS custom properties and scoping of values and learn how to use them with Angular Ivy• Use testing harnesses present in Angular components to write effective tests• Explore the architecture of the Angular compatibility compiler and understand why it is important• Discover effective techniques for migrating your existing Angular apps to the Ivy engine• Overcome challenges that you might face when switching to AOT compilationWho this book is forThis book is for experienced Angular web developers who want to migrate to the latest Ivy engine for building faster web applications. Intermediate knowledge of Angular and TypeScript will help you get the most out of this book.

Chapter 1: Discovering New APIs and Language Syntax

As its only officially supported programming language, Angular is tightly coupled with TypeScript. Support for new versions of TypeScript is introduced with major and minor version releases of Angular. In this chapter, we will explore three powerful language features that have been released in the recent versions of TypeScript and Angular:

• The optional chaining operator (?.)
• The nullish coalescing operator (??)
• Native private class members (#)

Through simple examples, we will highlight the strengths of these modern programming language features. We will even learn how two of the new operators work elegantly together in common scenarios. Learning about this new syntax and semantics is key to understanding the examples throughout this book.

Globalization is the process of supporting and adapting multilingual and regional capabilities in an application. Angular Ivy introduces improved globalization APIs. Together, we will learn about localization bundling, directionality querying, and lazy loading locale data through comprehensive examples.

Many core parts of Angular are built with testability in mind. Angular Ivy introduces strongly typed dependency resolving in tests and a fake icon registry for integrated component tests.

In this first chapter, we will cover the following topics:

• Modernizing your code with powerful language features
• Optimizing regional support with improved globalization APIs
• Enhancing tests with stronger types and new APIs

The demo application featured in Part 2, Build a Real-World Application with the Angular Ivy Features You Learned does not use globalization APIs. The tests featured in that part focus on component testing using the new concept component testing harnesses, which will be introduced in Chapter 3, Introducing CSS Custom Properties and New Provider Scopes.

After reading this chapter, you will be able to refactor your existing Angular applications and tests to use modern standards and Angular APIs when developing.

Technical requirements

To support all the features introduced in this chapter, your application requires at least the following:

• Angular Ivy version 9.1
• TypeScript version 3.8

You can find the complete code examples for the globalization APIs in this book's companion GitHub repository at https://github.com/PacktPublishing/Accelerating-Angular-Development-with-Ivy/tree/main/projects/chapter1/globalization.

Modernizing your code with powerful language features

TypeScript is an integral part of Angular, but because Angular has its own compiler transformations that extend TypeScript's compilation steps, we are inevitably tied to the version of TypeScript that the Angular compiler supports. Fortunately, Angular is good at keeping up with recent versions of TypeScript. In this section, we are going to discuss some of the most noteworthy additions to the TypeScript language in the most recent versions supported by Angular Ivy.

The optional chaining operator

TypeScript version 3.7 introduces a new operator for optional property access, optional element access, and optional calls. The optional chaining operator (?.) short circuits in the case of nullish values – that is, null or undefined – in which case it evaluates to undefined.

Optional chaining is great for working with composite objects or just plain old complex data structures such as large business documents transferred from a server, a dynamic runtime configuration, or telemetry from Internet of Things (IoT) devices.

The optional chaining operator allows us to be more concise in a single expression that attempts to access a hierarchy of properties that may or may not be available.

Say we are working on a document processing system that supports Universal Business Language (UBL) documents in JSON format. In our UBL invoice parser, we want to determine the UBL version that the document follows to be able to parse it according to a standard version. We fall back to UBL version 2.1 if it's left unspecified.

Without optional chaining, our code might look like this, given an invoice variable containing the invoice document:

const ublVersion =

(invoice.Invoice[0].UBLVersionID &&

invoice.Invoice[0].UBLVersionID[0] &&

invoice.Invoice[0].UBLVersionID[0].I...

Table of contents

• Accelerating Angular Development with Ivy
• Foreword
• Contributors
• About the authors
• About the reviewer
• Preface
• Chapter 1: Discovering New APIs and Language Syntax
• Chapter 2: Boosting Developer Productivity Through Tooling, Configuration, and Convenience
• Chapter 3: Introducing CSS Custom Properties and New Provider Scopes
• Chapter 4: Exploring Angular Components Features
• Chapter 5: Using CSS Custom Properties
• Chapter 6: Using Angular Components
• Chapter 7: Component Harnesses
• Chapter 8: Additional Provider Scopes
• Chapter 9: Debugging with the New Ivy Runtime APIs
• Chapter 10: Using the Angular Compatibility Compiler
• Chapter 11: Migrating Your Angular Application from View Engine to Ivy
• Chapter 12: Embracing Ahead-of-Time Compilation
• Other Books You May Enjoy