Angular Ivy

Docs

• Guide
• Compatibility Guide
• Compatibility Examples

Project

• list of changes
• issues

Articles

• Nrwl: Understanding Angular Ivy: Incremental DOM and Virtual DOM
• Nrwl: Metaprogramming, Higher-Order Components and Mixins with Angular Ivy
• indepth.dev: angular-ivy
• Angular blog: It’s time for the compatibility opt-in preview of Ivy
• Angular blog: Ivy’s internal data structures

Migration

Disable Ivy for tests

doc

// tsconfig.app.json
{
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

@ContentChildren

doc

Only match direct children by default.

🛑 Uncaught TypeError: Cannot read property 'bar' of undefined

🛠️ @ContentChildren('foo', {descendants: true}) foos: QueryList<ElementRef>; (or rewrite template)

Inheritance w/ DI

doc

All classes that use Angular DI must have an Angular class-level decorator.

🛑 ERROR: This constructor is not compatible with Angular Dependency Injection...

🛠️ Add a decorator (@Injectable or @Directive)

Change detection: newer use something before its definition

Doc: select, input

In Ivy, bindings are checked in the order they are defined in the template, and the template is processed in just one pass.

🛑 _no error, but some rendering "bugs"* OR Error: ExpressionChangedAfterItHasBeenCheckedError:...

🛠️ Rewrite template in a procedural way (e.g. When using *ngFor, use <option [selected]> instead of <select [value]>)

No more metadata.json for libraries

doc

Libraries metadatas are extracted from the .d.ts files.

🛑 _compilation error* (e.g. error NG1010: selector must be a string)

🛠️ don't export variables (use const)

@ContentChild(TemplateRef)

Ivy can't find the templateRef