👨🏾‍🚀 🏢 🐋 Angular 9 is now available - Ivy has arrived 💐 🧑🏻‍🤝‍🧑🏻 ➖

Version 9 of Angular has been released, this is the main release covering the entire platform, including the framework itself, angular material and the CLI. In this release, applications by default switch to the Ivy compiler and runtime and, as well, provide improved ways to test components.

This is one of the biggest Angular updates in 3 years, and the development team is excited about the opportunities that allow developers to create better applications and contribute to the Angular ecosystem.

How to upgrade to version 9

Go to update.angular.io for more information. To ensure that the update runs smoothly, it is recommended that you first upgrade to the latest version of Angular 8.

Upgrading to the latest version 8

ng update @angular/cli@8 @angular/core@8

ng update @angular/cli @angular/core

To familiarize yourself with the major changes made in this update, including the deprecated APIs, see Upgrading to version 9 of Angular in the Angular documentation.

Ivy

Version 9 transfers all applications to the Ivy compiler and runtime by default. In addition to hundreds of fixed bugs, the Ivy compiler and runtime offer many advantages:

Smaller bundle sizes
Faster Testing
Best debugging
Improved CSS class and style bindings
Improved type checking
Improved build error messages
Improved build time, AOT enabled by default
Improving internationalization

Let's consider in detail some improvements

Smaller bundle sizes

The Ivy compiler was designed to remove parts of Angular that are not used with treeshaking, and to reduce the amount of code generated for Angular components.

Thanks to these improvements, applications can get a significant reduction in size.

Small applications that do not use many of the features of the framework can benefit most from treeshaking.
Large applications with many components can benefit from reduced factory sizes.
Medium-sized applications will get roughly the same, or slightly smaller, since they benefit less from treehaking and do not use many components to greatly benefit from smaller factories.

Faster Testing

The Ivy TestBed implementation has also been updated, becoming more efficient.

Previously, TestBed recompiled all components between runs of each test, regardless of whether any changes were made to the components (for example, through overrides).
In Ivy, TestBed does not recompile components unless the component has been manually overridden, which avoids recompilation between most tests.

With this change, the core tests of the framework pass approximately 40% faster. It is expected that users will notice an increase in the speed of testing their applications at the level of 40-50%.

Improved debugging

Ivy provides additional tools for debugging applications. When launching the application in development mode using the Ivy runtime, a new object for debugging ng is now offered.

Angular , .
, applyChanges

Ivy also improves stack trace to debug issues like ExpressionChangedAfterItHasBeenCheckederror. Previously, the stack was not very useful:

With Ivy, you see more useful information that allows you to go directly to the template instruction with a modified expression.

For example, if you click on AppComponent_Template in the stack above, you can see a specific line in the generated code where the error occurs:

If you want, you can also go to any of these framework instructions to track how the framework creates or updates your components .

Improved styling and CSS classes.

Ivy provides enhancements for handling styles. Previously, if an application contained competing style definitions, these styles could replace each other. With Ivy, styles merge predictably.

Consider the following template and component fragments:

<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>

@Component({
  host: {
    style: "color:blue"
  },...
})
...

@Directive({
  host: {
    style: "color:black",
    "[style.color]": "property"
  },...
})
...

Previously, the binding that was calculated last was applied, and this could depend on the time the changes were made to these expressions. If myColor and myOtherColor were undefined, the static “red” style would be ignored.

In version 9, you can manage your styles with a clear priority that is independent of time. The most specific styles take precedence. For example, a binding to [style.color] overrides the intersecting binding [style].

However, for backward compatibility reasons, we left the behavior of [ngStyle] and [ngClass] the same as before. When updating snapping values, the new values will override any overlapping snapping.

You can read more about style precedence rules in the template syntax guide.in the documentation.

As a side effect of style refactoring, you can now also bind to CSS variables (CSS custom properties).

<div [style. -- main-border-color]=" '#CCC' ">
<p style="border: 1px solid var( - -main-border-color)">hi</p>
</div>

Type checking improved

The Angular compiler can check more application types and apply more stringent rules. These features will help you identify bugs in the early stages of development.

Two main flags are supported for additional type checks in addition to the standard ones:

fullTemplateTypeCheck - enabling this flag tells the compiler to check everything in your template (ngIf, ngFor, tp-template, etc.)
strictTemplates - activating this flag will apply the most stringent rules for type checking.

→ More about type checking in templates

Build errors fixed

The new Ivy compiler is not only faster and provides higher type safety, but also makes reading error messages easier.

In version 8 or the View Engine, a typical compiler error will look like this:

In version 9 with Ivy, the same error looks like this:

Improved build time, AOT compiler is enabled by default.

Thanks to the Ivy architecture, compiler performance has improved significantly.
Measured compiler performance in terms of overhead for a simple compilation of TypeScript applications. For our documentation project (angular.io), overhead decreased from 0.8x to 0, x with Ivy, an improvement of almost 40%.

These mean that AOT builds can be noticeably faster. Thanks to this, you can use AOT even in dev mode. This means that “ng serve” now has the same advantages as release builds, improving the development experience for Angular.

Thanks to changes in the compiler and runtime, entryComponents are also no longer required. These components will be detected and compiled automatically when they are used.

Enhanced Internationalization (i18n)

Internationalization was a feature of Angular where you could build an application once for one locale and get highly optimized and localized applications. Version 9.0 accelerated the process by moving the i18n lookups later in the build process. This change made it 10 times faster.

→ More about the new i18n :angular/ localize and the new angular.json.

More reliable ng update

Changes have been made to the operation of ng update to make it more reliable and informative.

Always use the latest version of the CLI. Starting with 8.3.19 CLI, we now use the CLI from the target version of the update. In the future, updates will always be processed by the last CLI.
Better update progress. ng update now gives more information about what is happening under the hood. For each migration, you will see information about it.
Easier debugging of updates. By default, ng update starts all migrations and leaves the cumulative changes to disk for verification. Version 9 upgrade also introduces a new flag --create-commits. When you run ng update --create-commits, the tool captures the state of your codebase after each migration, so that you can step by step make and debug changes that are posted to your code.

New Features “providedIn”

When you create the @Injectable service in Angular, you must choose where it is added to the injector. In addition to the previous “root” and “module” options, two additional options appeared.

platform - providedIn: 'platform' indication makes the service available in a special singleton platform injector, which is shared by all applications on the page.
any - provides a unique instance for each module (including lazy modules)

→ More about providedIn

Component binding

Component testing has historically relied on the use of implementation details, such as CSS selectors, to find components and trigger events. This meant that whenever the component library changed, all tests based on these components had to be updated.

Version 9 introduced component bindings that offer an alternative way to test. By abstracting from implementation details, you can be sure that your tests are correctly defined and less fragile.

Most components of Angular Material can now be tested using these bindings, and they are also available to any author component in the composition (CDK).

Here is a test example before:


it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const selectTrigger = fixture.debugElement.query(
    By.css(".mat-select-trigger")
  );
  selectTrigger.triggerEventHandler("click", {});
  fixture.detectChanges();
  await fixture.whenStable();
  const options = document.querySelectorAll(".mat-select-panel mat-option");
  options[1].click(); // Click the second option, "Bug".
  fixture.detectChanges();
  await fixture.whenStable();
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

And the same thing now:


it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const select = await loader.getHarness(MatSelect);
  await select.clickOptions({ text: "Bug" });
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

New components

Now you can incorporate features from YouTube and Google Maps into your applications.

You can embed the YouTube player in your application with the new youtube player.
We also introduce google-maps components. These components make it easy to visualize Google Maps, display markers, and connect interactivity so that it works like a regular angular component, eliminating the need to learn the Google Maps API.

IDE & language service improvement

Significant improvements have been made to the Angular language service extension on the Visual Studio Marketplace platform. Along with major architectural repairs to solve performance and stability issues, many long-standing errors have been fixed.

TextMate grammar for template syntax now allows you to highlight syntax in both embedded and external templates
Go to Definition for templateUrl and styleUrls
Type and NgModule information in tooltip

TypeScript 3.7 support

Angular has been updated to work with TypeScript 3.6 and 3.7, including the extremely popular optional binding function in TypeScript 3.7. To stay relevant to the ecosystem, we also updated versions of other dependencies such as zone.JS and RxJS.

Angular 9 is now available - Ivy has arrived