Accelerating Angular Development with Ivy

Accelerating Angular Development with Ivy

by Lars Gyrup Brink Nielsen, Jacob Andresen
Released October 2021
Publisher(s): Packt Publishing
ISBN: 9781800205215

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Get a comprehensive introduction to the major Angular framework rewrite known as Angular Ivy

Key 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 development

Book Description

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.

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 compilation

Who this book is for

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

Table of contents

  1. Accelerating Angular Development with Ivy
  2. Foreword
  3. Contributors
  4. About the authors
  5. About the reviewer
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Conventions used
    6. Get in touch
    7. Share Your Thoughts
  7. Chapter 1: Discovering New APIs and Language Syntax
    1. Technical requirements
    2. Modernizing your code with powerful language features
      1. The optional chaining operator
      2. The nullish coalescing operator
      3. Handling nullish values with the new operators
      4. Native private class members
    3. Optimizing regional support with improved globalization APIs
      1. Bundling localizations
      2. Lazy loading locale data
      3. Dynamically setting the dir attribute based on locale direction
      4. Art direction using the directionality query
    4. Enhancing tests with stronger types and new APIs
      1. Resolving strongly typed dependencies with TestBed.inject
      2. Stubbing custom Angular Material SVG icons with FakeMatIconRegistry
    5. Summary
  8. Chapter 2: Boosting Developer Productivity Through Tooling, Configuration, and Convenience
    1. Technical requirements
    2. Using predictable style bindings
    3. Outputting faster and smaller bundles with AOT compilation
    4. Taking advantage of strict mode and other new configurations
      1. Strict mode
      2. Angular compiler options
    5. Enhancing our Angular testing experience
      1. Expect error compiler annotation
      2. Faster tests with AOT compilation
    6. Leveling up our developer experience
      1. Improved compilation errors
      2. Strict template type checking
      3. An even better update experience
      4. Better IDE integration
    7. Summary
  9. Chapter 3: Introducing CSS Custom Properties and New Provider Scopes
    1. Technical requirements
    2. Using CSS Custom Properties with Angular
    3. Discovering the any and platform provider scopes
      1. The any provider scope
      2. The platform provider scope
    4. Summary
  10. Chapter 4: Exploring Angular Components Features
    1. Technical requirements
    2. Angular YouTube Player
      1. Getting started
      2. Usage
      3. API reference
    3. Angular Google Maps components
      1. Getting started
      2. The GoogleMap component
      3. The MapMarker component
      4. The MapMarkerClusterer component
      5. The MapInfoWindow component
    4. The Clipboard API
      1. The CdkCopyToClipboard directive
      2. The Clipboard service
      3. The PendingCopy class
    5. Testing as a user with component harnesses
      1. Harness environments and harness loaders
      2. Component harnesses
    6. Summary
  11. Chapter 5: Using CSS Custom Properties
    1. Technical requirements
    2. Building a theme picker using custom CSS properties
    3. Implementing the theme service
    4. Controlling CSS Grid templates using custom CSS properties
    5. Summary
  12. Chapter 6: Using Angular Components
    1. Understanding the Angular Academy application
      1. Dividing the application into components
      2. Including dependencies using modules
      3. Retrieving data using services
      4. Wiring up navigation
    2. Showing course videos using the Angular YouTube Player
    3. Finding your school using the Angular Google Maps component
    4. Summary
  13. Chapter 7: Component Harnesses
    1. Using Angular Material's component harnesses
    2. Creating a component harness
    3. Summary
  14. Chapter 8: Additional Provider Scopes
    1. Revisiting the root provider scope
    2. Using the any provider scope for a configurable ThemeService
    3. Sharing information across application boundaries using the platform provider scope
    4. Summary
  15. Chapter 9: Debugging with the New Ivy Runtime APIs
    1. Technical requirements
    2. Introducing the new Ivy runtime API
    3. Inspecting a component instance
    4. Inspecting event listeners
      1. DOM event listeners
      2. Custom component event bindings
    5. Inspecting an embedded view context
    6. Summary
  16. Chapter 10: Using the Angular Compatibility Compiler
    1. Technical requirements
    2. Introducing the Angular Compatibility Compiler
    3. Using the Angular Compatibility Compiler
      1. Angular Compatibility Compiler options
    4. Improving the Angular Compatibility Compiler in your CI/CD workflow
      1. Targeting a single application in a monorepo workspace
    5. Summary
  17. Chapter 11: Migrating Your Angular Application from View Engine to Ivy
    1. Technical requirements
    2. Learning the Angular update process
      1. The Angular Update Guide
      2. Managing Angular dependencies
    3. Performing automated Angular Ivy migrations
      1. Making the most of the ng update command
      2. Reviewing automated Angular Ivy migrations
    4. Performing manual Angular Ivy migrations
      1. Managing initial navigation
      2. Optimizing change detection by configuring NgZone
      3. Improving unit test type safety with TestBed.inject
    5. Summary
  18. Chapter 12: Embracing Ahead-of-Time Compilation
    1. Technical requirements
    2. Using the ahead-of-time compiler for all development phases
      1. Ahead-of-time compilation for builds
      2. Ahead-of-time compilation for component templates
      3. Ahead-of-time compilation for unit tests
      4. Ahead-of-time compilation for the runtime
    3. Dealing with the ahead-of-time compiler's limitations
      1. Providing values using functions
      2. Declaring metadata using functions
      3. Using tagged template literals in component templates
      4. Initializing metadata variables
    4. Initializing asynchronous dependencies
      1. Providing an asynchronous dependency with a static platform provider
      2. Resolving an asynchronous dependency with an application initializer
    5. Summary
    6. Why subscribe?
  19. Other Books You May Enjoy
    1. Packt is searching for authors like you

Product information

  • Title: Accelerating Angular Development with Ivy
  • Author(s): Lars Gyrup Brink Nielsen, Jacob Andresen
  • Release date: October 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781800205215