What is new in Angular 9?

The 9.0.0 release of Angular is here! This is a major release that spans the entire platform, including the framework, Angular Material, and the CLI.

Version 9 moves all applications to use the Ivy compiler and runtime by default. In addition to hundreds of bug fixes, the Ivy compiler and runtime offers numerous advantages:

• Smaller bundle sizes
• Faster testing
• Better debugging
• Improved CSS class and style binding
• Improved build times, enabling AOT on by default

Here’s a breakdown of some of the more notable improvements.

Smaller bundle sizes

The Ivy compiler has been designed to remove parts of Angular that aren’t being used via tree-shaking and to generate less code for each Angular component.

With these improvements, small apps and large apps can see the most dramatic size savings.

• Small apps that don’t use many Angular features can benefit most from tree-shaking.
• Large apps with many components can benefit most from the reduced factory size.
• Medium-sized apps should see bundle sizes that are on par or slightly smaller, since they benefit less from tree-shaking and don’t have enough components to truly leverage smaller factories.

Faster testing

We have also revamped the implementation of TestBed in Ivy to make it more efficient.

Previously, TestBed would recompile all components between the running of each test, regardless of whether there were any changes made to components (for example, through overrides).

In Ivy, TestBed doesn’t recompile components between tests unless a component has been manually overridden, which allows it to avoid recompilation between the grand majority of tests.

With this change, the framework’s core acceptance tests are about 40% faster. We would expect users to see their own application test speeds to be around 40–50% faster.

Better debugging

Ivy provides you with more tools to debug your applications. When running an application in Dev Mode with the Ivy runtime, we now offer the new ng object for debugging.

• You can ask Angular for access to instances of your components, directives, and more
• You can manually call methods and update state
• When you want to see the results of change detection, you can trigger change detection with applyChanges

Ivy also improves the stack trace for debugging issues such as the ExpressionChangedAfterItHasBeenCheckedError. Previously the stack trace could be unhelpful:

With Ivy, you see a more useful stack trace that allows you to jump directly to the template instruction with the expression that has changed.

For example, if you click on AppComponent_Template in the stack trace above, you can see the specific line in the generated code where the error is being thrown:

If you’re so inclined, you can also step into any of these framework instructions to walk through how the framework creates or updates your components.

Improved CSS class and style binding

The Ivy compiler and runtime provides improvements for handling styles. Previously, if an application contained competing definitions for a style, those styles would destructively replace each other. With Ivy, the styles are merged in a predictable way.

Consider the following template and component snippets:

<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, whichever binding was evaluated last would win, and this could depend on the timing of changes to these expressions. If myColor and myOtherColor both were undefined, the static ‘red’ style would be ignored.

With version 9, you can manage your styles through a clear, consistent order of precedence that isn’t dependent on timing. The most specific styles always have the highest precedence. For example, a binding to [style.color] overrides a conflicting binding to [style].

However, for backwards compatibility reasons, we have left [ngStyle] and [ngClass] bindings behavior the same as before. When their binding values are updated, the new values will override any competing bindings.

You can read more about styling precedence rules in the Template Syntax guide in the documentation.

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

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

Improved build times, enabling Ahead-of-Time compiler by default

Thanks to Ivy’s new architecture, we’ve made significant improvements to the compiler’s performance.

We measure our compiler’s performance in terms of the overhead on top of a plain TypeScript compilation of an application. For our documentation app (angular.io), this overhead decreased from 0.8x to 0.5x with Ivy, an improvement of nearly 40%.

These improvements mean that AOT builds can be noticeably faster. Thanks to this speedup, for the first time ever we’re using AOT even for dev-mode builds. This means that `ng serve` now benefits from the same compile-time checking as production builds, significantly improving the developer experience for Angular.

Thanks to the changes in the compiler and runtime, we also no longer require entryComponents. These components will be discovered and compiled automatically by their usage.

For more information and to develop your web apps using Angular, Hire Angular Developer from us as we provide you high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop the custom web app using Angular, please visit our technology page.