How does Angular Ivy work internally?

Angular Ivy is a complete re-imagining of Angular's compilation and rendering pipeline, designed to be smaller, faster, and simpler. It fundamentally changes how Angular components and templates are processed, compiled, and rendered, focusing on improving build times, bundle sizes, and overall developer experience.

Core Principles of Ivy

Ivy operates on three fundamental principles: locality, incremental compilation, and tree-shakable output. These allow it to process components and modules independently, only recompile what's changed, and produce highly optimized, plain JavaScript output.

Compiler and Renderer Redesign

The most significant change in Ivy is how the Angular compiler translates templates into instructions and how the runtime renderer executes them. Unlike its predecessor (View Engine), Ivy produces a direct, low-level instruction set for rendering.

Template Compilation

Ivy's Ahead-of-Time (AOT) compiler transforms each component's template directly into a set of highly optimized, tree-shakeable JavaScript instructions. These instructions are static methods attached to the component class itself, typically within a static 'ɵcmp' property (for components) or 'ɵdir' (for directives), and directly tell the Angular runtime how to create and update the DOM.

Consider a simple Angular component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h1>Hello {{ name }}!</h1>`
})
export class HelloComponent {
  name = 'World';
}

Ivy's compiler would transform this into something resembling the following JavaScript output (simplified for clarity):

import { ɵɵdefineComponent, ɵɵelementStart, ɵɵtextInterpolate1, ɵɵelementEnd, ɵɵtext } from '@angular/core';

export class HelloComponent {
  name = 'World';

  static ɵcmp = ɵɵdefineComponent({
    type: HelloComponent,
    selectors: [['app-hello']],
    decls: 2, // Number of DOM nodes in the template
    vars: 1,  // Number of bindings (interpolations, properties, attributes, classes, styles)
    template: function HelloComponent_Template(rf, ctx) {
      if (rf & 1 /* Create */) {
        // Creation instruction phase: build up the static DOM structure
        ɵɵelementStart(0, 'h1'); // Create <h1> element at index 0
        ɵɵtext(1);             // Create a text node at index 1
        ɵɵelementEnd();         // Close <h1>
      }
      if (rf & 2 /* Update */) {
        // Update instruction phase: apply bindings and update dynamic parts
        ɵɵtextInterpolate1('Hello ', ctx.name, '!'); // Update text node at index 1
      }
    },
    encapsulation: 2 // ViewEncapsulation.Emulated
  });
}

Runtime Execution (LView and TView)

The Angular runtime then interprets these generated instructions to perform DOM operations. Key data structures enable this efficient rendering:

• LView (Logical View): A runtime data structure representing an instance of a component's view. It holds references to the component instance, its change detector, its local DOM nodes, and the current values of its bindings. An LView is created for every component instance.
• TView (Template View): A static, immutable data structure created once per component *definition*. It stores the structural information of a component's template, such as the number of elements, nodes, bindings, and references to the generated instruction functions. All instances of a component share the same TView.
• Instruction Set: A small, tree-shakeable set of core rendering functions (e.g., ɵɵelementStart, ɵɵtext, ɵɵtextInterpolate1, ɵɵlistener) that directly manipulate the DOM and are generated by the compiler. Only the instructions actually used by the application are bundled.

Incremental Compilation and Locality

Ivy enables

Ivy compiles each component and module in isolation, without needing information about other parts of the application. This "locality" means that during development, when a single component or template changes, only that specific part needs to be recompiled, drastically speeding up compilation times and developer feedback cycles.

Tree-Shakable Bundles

Ivy's compiler generates plain JavaScript code that is highly optimized and inherently more tree-shakeable. Only the Angular runtime instructions and features actually used by the application are included in the final bundle, leading to significantly smaller application sizes, particularly beneficial for smaller or less complex applications.

No More NgFactory Files

Unlike View Engine, Ivy does not generate .ngfactory.ts files for components or modules. Components are instantiated directly via their static ɵcmp property, which simplifies the compilation output, reduces the number of generated files, and contributes to smaller build artifacts.

Improved Debuggability

The generated code in Ivy is much closer to the original component and template structure. This makes it easier to debug Angular applications in browser developer tools, as stack traces are cleaner and more directly map back to the source code written by the developer.