Mastering Angular 16 Compatibility: Uncovering the Intricacies of View Engine, Ivy Engine, and Beyond

In May 2023, the Angular team introduced a new Version 16. This release brought forth an array of exciting features and generated significant excitement within the community, especially surrounding signals. In this article, we’ll cover some of the main building blocks of the Angular framework, while diving deep into the different Angular engines to see how they maintain backward compatibility and how all this is relevant to Angular 16.

Frontend at Frontegg

As part of the Frontegg frontend team, we are in charge of creating and maintaining various frontend SDKs for the company. This includes working with a range of technologies like React, Vue.js, and even server-side rendering (SSR) frameworks like Next.js. As you may already have guessed, we are also responsible for the Angular SDK.

The problem we encountered

Upon the release of Angular v16, we encountered a compatibility issue with our @frontegg/angular SDK. After upgrading our application to Angular v16 and attempting to run it, an error surfaced.

Upon careful inspection of the error message, it became evident that our Angular SDK was not compatible with Angular Ivy.

A review of Angular’s changelog.md file shed light on the matter: “Angular Compatibility Compiler (NGCC) has been removed and as a result, Angular View Engine libraries will no longer work.”

This raises the question: What is the View Engine, how does it differ from Ivy Engine, and where does the NGCC fit into this equation?

To get to the root of this, we needed to understand what View engine is, and how it differs from Ivy Engine. Understand that requires deep knowledge of how the Angular compiler works:

Angular Compiler

The Angular compiler is a tool that takes care of turning your Angular apps and pieces of code into JavaScript code your browser can understand. It works alongside TypeScript and adds some extra magic to make sure everything works smoothly.

Here’s what the Angular compiler does:

• It translates Angular directives and components into JavaScript that your browser can show.
• It makes sure your component designs follow the rules using TypeScript’s checking.
• If you change your code while working on your app, the compiler responds by updating the UI on the spot.
• It sets up so-called “change detectors” that keep track of when things change in your app. They work with ngZone to keep everything running nice and fast.

View Engine: The old approach

The View Engine was introduced in Angular v4 and deprecated in v12. As mentioned, support for this engine was discontinued in v16.

How does it work?

Angular code is compiled into factory functions that are executed and transformed into the DOM during runtime by the interpreter.

Ivy Engine: The latest engine

The Ivy Engine became the default Angular compiler with the release of Angular v9.

Ivy Engine introduced several features and improvements related to decreasing bundle size and improving performance.

Decreasing bundle size

While React and Vue rely on the Virtual DOM, which includes an interpreter during runtime, Angular utilizes Incremental DOM.

The Ivy engine creates a template that serves as instructions for the subsequent compilation phase. Essentially, these template instructions serve as the compiler itself.

This is a much leaner approach because instead of shipping the full compiler into the browser with your application, you end up with just the parts relevant to your application code.

Improving performance

By skipping the complete interpretation phase, the Ivy engine enhances the app’s runtime performance. Moreover, Incremental DOM prevents the recreation of the entire virtual DOM from scratch with each render, contributing to memory savings.

NGCC – Angular Compatibility Compiler

Once we were familiar with Angular compiler responsibilities and the differences between View and Ivy engines, we focused on another compiler that Is responsible for making them both work together.

The Angular Compatibility Compiler, or NGCC, is employed to support Angular SDKs built with the View engine.

NGCC converts View Engine SDKs into a new Ivy engine structure, enabling Ivy applications to integrate view SDKs. However, due to the high maintenance of the compiler and the long compilation step, Angular v16 no longer supports NGCC.

Resolving compatibility issues

So now that we had a clue about what the View and Ivy engines are, and why Angular dropping support for the NGCC engine was accompanied by ending support for the View engine, we could start investigating our own Angular NPM package.

In our tsconfig file, we encountered the following configuration:

Yes, we had disabled Ivy. But why would we do that?

Disabling Ivy in Angular sdk

Evidently, the Angular team did not recommend publishing NPM packages compiled with Ivy. Enabling Ivy would trigger an error in the NPM prerelease:

Yet, despite this obstacle, we could not support the new version of Angular (16) unless we compiled our SDK with Ivy. Clearly, some information was missing. To resolve this NPM dilemma, we added another flag under the previously mentioned angularCompilerOptions: “compilationMode”: “partial”.

Partial compilation explained

So you might be wondering, how does the compilation mode relate to all of this? The Angular team does not advise releasing Ivy-based SDKs due to the challenge of maintaining backward compatibility. To address this, and to eliminate the aforementioned NGCC step, Angular recommends adopting a partial compilation mode for all SDKs.

Partial compilation mode,  just as the term implies, will partially compile the SDK pre-releasing it to NPM in a process called Link time optimization. After installing the package in the Angular end application, it will finish the linking process and the package will be adjusted to the app compilation mode.

As you can see, this flow starts even before installation and therefore it will be more performant than the NGCC that was removed from v16.

So upon converting our Angular SDK compilation mode to be partial, we were able to release a new version that is compiled using Ivy Engine to NPM and therefore supports the latest Angular 16 version.

Summary

Navigating the transition to Angular 16 and Ivy Engine compatibility posed challenges. By understanding the role of Angular compilers, the differences between View Engine and Ivy Engine, and the impact of NGCC, we were in a position to make informed decisions and find the best solution. Leveraging partial compilation mode allowed us to tackle compatibility issues and achieve optimal performance while supporting the latest Angular advancements.