Accelerating Angular Development with Ivy E-Book

Lars Gyrup Brink Nielsen

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 219

Veröffentlichungsjahr: 2021

Beschreibung

Angular 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.

Leseprobe

Accelerating Angular Development with Ivy

A practical guide to building faster and more testable Angular apps with the new Ivy engine

Lars Gyrup Brink Nielsen

Jacob Andresen

BIRMINGHAM—MUMBAI

Accelerating Angular Development with Ivy

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Associate Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Pavan Ramchandani

Senior Editor: Sofi Rogers

Content Development Editor: Rakhi Patel

Technical Editor: Shubham Sharma

Copy Editor: Safis Editing

Project Coordinator: Manthan Patel

Proofreader: Safis Editing

Indexer: Subalakshmi Govindhan

Production Designer: Roshan Kawale

First published: September 2021

Production reference: 1300921

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80020-521-5

www.packt.com

This book is dedicated to my daughters, for inspiring me to always do better. My greatest thanks to my wife, for supporting me and my extra-curricular activities such as writing this book.

– Lars Gyrup Brink Nielsen

I dedicate this book to the Angular community.

– Jacob Andresen

Foreword

Angular Ivy was first introduced in Angular version 9 in 2020 and it has been kind of a black box for many developers. Few developers know much about Ivy but Lars Gyrup Brink Nielsen is one of the leading Ivy experts in the world. This is the first book that goes into more detail about Ivy features and tooling. It is a must-read for all developers at all levels. Even if you are an expert in Angular, you will learn a lot from this book.

Santosh Yadav

Google Developer Expert in Angular, GitHub Star, Auth0 Ambassador,Cofounder of This is Angular and Software Consultant.

Contributors

About the authors

Lars Gyrup Brink Nielsen is a frontend architect at Systemate A/S in Denmark. As a cofounder of the open learning non-profit This is Learning, he creates open platforms for free knowledge and public learning. Lars is a tech writer, international tech speaker, FOSS maintainer, Microsoft MVP in Developer Technologies, and GitHub Star.

I want to extend my thanks to my computer science professor, Hans Hüttel, for being an inspiration early in my career and for teaching me regular expressions.

Jacob Andresen works as a senior software developer based in Copenhagen, Denmark. He has been working as a software developer and consultant in information retrieval systems and web applications since 2002.

I want to thank my wife, Anita, and my daughter, Sofie, for understanding why I spend all those hours in front of a computer screen.

About the reviewer

Anu Nagan G has worked in various corporate organizations, from a SaaS start-up (GenDeep), to midsize (GAVS), and Fortune 500 companies (DXC) playing various roles there, such as technical product manager, full stack product lead (Angular, Java, Python, and AWS], and delivery lead, respectively, in his 8-year tenure. Currently, he is with Lister Technologies leading parallel projects such as advanced AI and analytics product CortexAI, clinical mobile app development, and Salesforce automation for B2B businesses. He has contributed to various AIOps products, including ZIF and Gcare in the past. He is an avid reader and cinephile who loves to play guitar and makes short films with his friends.

I would like to thank my wife, Hema, for always giving me the freedom to pursue my interests.

Table of Contents

Accelerating Angular Development with Ivy

Foreword

Contributors

About the authors

About the reviewer

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

Get in touch

Share Your Thoughts

Chapter 1: Discovering New APIs and Language Syntax

Technical requirements

Modernizing your code with powerful language features

The optional chaining operator

The nullish coalescing operator

Handling nullish values with the new operators

Native private class members

Optimizing regional support with improved globalization APIs

Bundling localizations

Lazy loading locale data

Dynamically setting the dir attribute based on locale direction

Art direction using the directionality query

Enhancing tests with stronger types and new APIs

Resolving strongly typed dependencies with TestBed.inject

Stubbing custom Angular Material SVG icons with FakeMatIconRegistry

Summary

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

Technical requirements

Using predictable style bindings

Outputting faster and smaller bundles with AOT compilation

Taking advantage of strict mode and other new configurations

Strict mode

Angular compiler options

Enhancing our Angular testing experience

Expect error compiler annotation

Faster tests with AOT compilation

Leveling up our developer experience

Improved compilation errors

Strict template type checking

An even better update experience

Better IDE integration

Summary

Chapter 3: Introducing CSS Custom Properties and New Provider Scopes

Technical requirements

Using CSS Custom Properties with Angular

Discovering the any and platform provider scopes

The any provider scope

The platform provider scope

Summary

Chapter 4: Exploring Angular Components Features

Technical requirements

Angular YouTube Player

Getting started

Usage

API reference

Angular Google Maps components

Getting started

The GoogleMap component

The MapMarker component

The MapMarkerClusterer component

The MapInfoWindow component

The Clipboard API

The CdkCopyToClipboard directive

The Clipboard service

The PendingCopy class

Testing as a user with component harnesses

Harness environments and harness loaders

Component harnesses

Summary

Chapter 5: Using CSS Custom Properties

Technical requirements

Building a theme picker using custom CSS properties

Implementing the theme service

Controlling CSS Grid templates using custom CSS properties

Summary

Chapter 6: Using Angular Components

Understanding the Angular Academy application

Dividing the application into components

Including dependencies using modules

Retrieving data using services

Wiring up navigation

Showing course videos using the Angular YouTube Player

Finding your school using the Angular Google Maps component

Summary

Chapter 7: Component Harnesses

Using Angular Material's component harnesses

Creating a component harness

Summary

Chapter 8: Additional Provider Scopes

Revisiting the root provider scope

Using the any provider scope for a configurable ThemeService

Sharing information across application boundaries using the platform provider scope

Summary

Chapter 9: Debugging with the New Ivy Runtime APIs

Technical requirements

Introducing the new Ivy runtime API

Inspecting a component instance

Inspecting event listeners

DOM event listeners

Custom component event bindings

Inspecting an embedded view context

Summary

Chapter 10: Using the Angular Compatibility Compiler

Technical requirements

Introducing the Angular Compatibility Compiler

Using the Angular Compatibility Compiler

Angular Compatibility Compiler options

Improving the Angular Compatibility Compiler in your CI/CD workflow

Targeting a single application in a monorepo workspace

Summary

Chapter 11: Migrating Your Angular Application from View Engine to Ivy

Technical requirements

Learning the Angular update process

The Angular Update Guide

Managing Angular dependencies

Performing automated Angular Ivy migrations

Making the most of the ng update command

Reviewing automated Angular Ivy migrations

Performing manual Angular Ivy migrations

Managing initial navigation

Optimizing change detection by configuring NgZone

Improving unit test type safety with TestBed.inject

Summary

Chapter 12: Embracing Ahead-of-Time Compilation

Technical requirements

Using the ahead-of-time compiler for all development phases

Ahead-of-time compilation for builds

Ahead-of-time compilation for component templates

Ahead-of-time compilation for unit tests

Ahead-of-time compilation for the runtime

Dealing with the ahead-of-time compiler's limitations

Providing values using functions

Declaring metadata using functions

Using tagged template literals in component templates

Initializing metadata variables

Initializing asynchronous dependencies

Providing an asynchronous dependency with a static platform provider

Resolving an asynchronous dependency with an application initializer

Summary

Why subscribe?

Other Books You May Enjoy

Packt is searching for authors like you

Preface

Angular Ivy is the current generation of Google's open source framework. Angular is well known for being bundled with a set of tools to increase application robustness and boost the developer experience. Angular relies on and evolves with TypeScript, the open source typed JavaScript superset by Microsoft.

Accelerating Angular Development with Ivy is the result of thousands of hours of research and experiments to unveil the most exciting runtime APIs, testing APIs, debugging APIs, and tooling that are introduced by Angular Ivy. The authors have carefully selected topics that are widely applicable to different types of Angular applications. Most of the topics discussed in this book have in common that they are largely uncovered by official documentation or other publicly available content.

This book contains three parts. Part 1, A Quick and Functional Guide to Angular Ivy, approaches new features, testing APIs and tooling from a theoretical and informative perspective. Significant topics are put in a business or application context through simple or extended examples to help you discover their value and inspire future use cases.

Part 2, Build a Real-World Application with the Angular Ivy Features You Have Learned, gets your hands dirty with some of the most exciting topics that were introduced in Part 1. We use the real-world application Angular Academy as a starting point and extend it with features through practical step-by-step exercises.

Part 3, Upgrade Your View Engine Application and Development Workflow to Angular Ivy, is an extensive migration guide for updating your application from Angular View Engine to Angular Ivy. As a hidden gem, you will learn about debugging your application at runtime by using Angular Ivy's debugging API on a component. Additionally, Part 3 introduces the Angular Compatibility Compiler and teaches you about optimizations. Part 3 is also the part to refer to to learn about the effect of the Angular Ahead-of-Time compiler and how to work around its edge cases and limitations.

After reading this book, you will have an overview of significant Angular Ivy features. Through realistic examples, you will have gained unique insights into fresh APIs and use cases. You will know the impact Angular Ivy has on your application and how you can maximize its benefits. After discovering how Angular Ivy improves your developer experience through all phases of developing your application, you will have boosted your productivity, and this book will serve as an excellent reference for every Angular Ivy application you develop in the future.

Who this book is for

Accelerating Angular Development with Ivy is written for the experienced Angular developer who wants to catch up on the exciting unique features and tooling added or improved by Angular Ivy. This book covers Angular versions 9 through 12.

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.

To get the most out of this book

This book assumes experience with Angular version 8 or earlier. The book is also applicable to developers working on the latest Angular version. You should be familiar with the Angular CLI to start the applications that are in this book's companion GitHub repository.

To focus on exciting additions and improvement, we skip all introductions to core concepts and building blocks of Angular. Therefore, we assume that you feel comfortable developing Angular directives, components, and services.

Angular's dependency injection system is integral to any Angular application. We expect you to be familiar with the APIs for managing dependencies.

Make sure to install a recent version of Angular CLI globally.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book's GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Accelerating-Angular-Development-with-Ivy. If there's an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

.Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781800205215_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."

A block of code is set as follows:

ngOnInit(): void {

    this.document.body.appendChild(

     this.#youtubeIframeScript);

  }

Any command-line input or output is written as follows:

ng add @angular/youtube-player

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "The user can do this by selecting a color by going to the Color Input field to obtain the desired color for the given Header background setting."

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you've read Accelerating Angular Development with Ivy, we'd love to hear your thoughts! Scan the QR code below to go straight to the Amazon review page for this book and share your feedback.

https://packt.link/r/180020521X

Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.