Wondering what’s new in frontend? Well, Angular 9 is out in the market!

Both the framework and the CLI have many new features added:

  • Support for TypeScript 3.8: This new version of TS brings many new language features that you can use in your Angular project,
  • Build Speed Improvements
  • New CLI Component Generator Option displayBlock which enables you to generate components using the CLI with the display: block style for displaying components instead of the default inline style used by default,
  • End-to-End tests now support grep and invertGrep which enable you to more easily pitch the test you want to run,
  • Improved HTML & Expression Syntax Highlighting: Using VSCode with the Language Service Extension, it will enable the IDE to syntax highlight expressions in the templates,
  • Directionality Query API which allows you to query for the current local direction at runtime,
  • TSLint 6.1 by default.

We can update to this latest version of Angular using the following command:

What’s new in Angular 9?

As we all know Angular is one of the three most popular JavaScript frameworks for building client-side web and mobile applications. It’s built and backed by Google and has been developed over the years into a fully-fledged platform with integrated libraries required for front-end web development.

Compared to React or Vue, performance and file size are big downsides of Angular.

One major problem of the previous versions of Angular is the large size of the final bundle which impacts the download time and as a result the overall performance of the application.

Angular 9 brings a few new features most importantly, the IVY compiler which provides a huge boost in performance.

In nutshell these are the new features of Angular 9:

  • Smaller bundles and better performance,
  • The Ivy compiler: The default use of the Ivy compiler is the most important feature of Angular 9, Ivy is what actually designed to solve the major problems of Angular i.e the performance and large file size.
  • Selector-less bindings support for Angular Ivy,
  • Internationalization support for Anguar Ivy.
  • Support for TypeScript Diagnostics Format
  • Support for more scopes in providedIn
  • A New Type-Safe TestBed.inject() Method Instead of TestBed.get()

 Small Bundles and Better Performance

Previous versions of Angular have relatively large file size of the final bundles compared to React or Vue.

The performance of the Angular runtime is quite good but the loading time is longer because of the large file size which affects the overall performance of the application.

So, what the Angular team is doing to solve the large size of the final bundles?

Enter Ivy.

  • Before Angular 8, the framework used ViewEngine as the renderer,
  • With Angular 8, Ivy is in experimental mode behind an optional flag,
  • With Angular 9+, Ivy is the default compiler.
No alt text provided for this image

Project IVY???

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.

Ivy is a complete rewrite of the Angular renderer which is simply the part of Angular that transforms your Angular templates into JavaScript code.

Angular components are a mix of TypeScript code, HTML and CSS. TypeScript is a superset of JavaScript, that needs to be compiled into JavaScript before it can be consumed by a web browser.

Angular previously made use of ViewEngine to transform TypeScript code to JavaScript.

The Angular ViewEngine transforms the templates and components to HTML and JavaScript so that the browser can render them.

Lets read some more information about IVY:

  • The Ivy compiler is abstracted from developers, and will replace ViewEngine so what you know about Angular is still valid.
  • Angular 8 allows developers to play with Ivy but with Angular 9, Ivy is the default renderer.
  • The Ivy compiler outputs much smaller JavaScript bundles, so Ivy solves Angular’s bundle problems.
  • The Ivy compiler will not change how you work with Angular so what you previously learned about Angular will still work in Angular 9+.

How to work with Ivy?

In Angular 9+, Ivy will be the default renderer, so Angular applications will be faster and smaller.

In Angular 8, you need to enable Ivy by adding the following lines to the tsconfig.json file:

You can then invoke the compiler by running the ngc command inside the node_modules folder:

Selector-less Directives in Ivy

With Angular 9, this feature has been added to Ivy so that developers get the advantages of Ivy compilation, but don’t miss previous functionality. Angular ViewEngine already supports this pattern.

Using selector-less directives as base classes is already supported in the old ViewEngine but missing in the Ivy preview in Angular 8. This is now added in Angular 9.

Consider the following pattern showing a decorated child class that inherits a constructor from an undecorated base class:

Let’s take, for example, this class:

 In ViewEngine the following code will work but not in Ivy before Angular 9:

In Angular 8 Ivy, you need to decorate the base directive with the @directive decorator to achieve the desired behavior.

A New Type-Safe TestBed.inject() Method Instead of TestBed.get()

Angular 9 provides a new TestBed.inject() instead of the deprecated TestBed.get() method:

TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef

The TestBed.get() method is not type-safe so was replaced with the new TestBed.inject()

With better performance that Angular 8 and a much smaller app bundle size, most Angular developers will want to update their apps to use Angular 9.

Changes with Angular Forms

There are a few form changes you should be aware of in this Angular 9. The first is that the <ngForm></ngForm> is no longer a valid selector to use while referencing an Angular form. You can use the <ng-form></ng-form> instead. Also the warning for using the removed form tag has been removed too. Secondly, the FormsModule.withConfig has been removed and you can now use the FormsModule directly.

Injection changes in core

This new version of Angular also comes with a little improvement. This is not such a big change, but some support has been added for the providedIn value section of dependency injections.

i18n Improvements

Angular as a JavaScript framework has long supported internationalization, and with the Angular CLI you can generate standard codes that would help create translator files so that your application can be published in multiple languages. This process has been even further refactored by the Angular team on Ivy to make it easier to add compile-time inlining.

Using Bazel with the Angular CLI

The @angular/bazel package provides a builder that allows Angular CLI to use Bazel as the build tool.

To opt-in an existing application, run

To use Bazel in a new application, first install @angular/bazel globally

then create the new application with

Now when you use Angular CLI build commands such as ng build and ng serve, Bazel is used behind the scenes. Outputs from Bazel appear in the dist/bin folder.

The command-line output includes extra logging from Bazel.

No alt text provided for this image
No alt text provided for this image

Ahead-of-time (AOT) compilation

The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

Angular offers two ways to compile your application:

Just-in-Time (JIT), which compiles your app in the browser at runtime.

Ahead-of-Time (AOT), which compiles your app at build time.

JIT compilation is the default when you run the ng build (build only) or ng serve (build and serve locally) CLI commands:

For AOT compilation, include the –aot option with the ng build or ng serve command

In the following example, the @Component() metadata object and the class constructor tell Angular how to create and display an instance of TypicalComponent.

No alt text provided for this image
No alt text provided for this image

Component harnesses differences

In version 9, we are introducing component harnesses, which offer an alternative way to test components. By abstracting away the implementation details, you can make sure your unit tests are correctly scoped and less brittle.

Most of Angular Material’s components can now be tested via harnesses, and we are making harnesses available to any component author as part of the Component Dev Kit (CDK).

Here’s an example test before harnesses:

And the same test with harnesses:

Sharing is caring!

Leave a Comment

Your email address will not be published. Required fields are marked *