×

Change Log Angular 9: Check Out The New Ivy Compiler And Runtime

HomeblogChange Log Angular 9: Check out the new Ivy compiler and runtime

The wait is finally over. Angular 9 is here with its final release. We have been keeping tabs on its production and patiently awaiting, with each Angular 8 update and every Angular 9 release candidate. This is a major update to Angular, which adds the new and improved Ivy compiler and runtime, faster testing, better debugging, and many more improvements.

Let’s discuss IVY and all the Angular 9 features in detail, shall we?

Improves the bundle sizes

In this Angular 9 feature, the bundle sizes are likely to decrease by 25-40 percent based on the app size. Small apps benefit the most from the tree shaking feature of IVY as they have to generate less code for the angular components. Smaller the bundles, better the performance. Thanks to Ivy!

Faster mobile apps

Mobile phones fetch half of the website traffic globally. A considerable amount of users come from places where there are slow internet connections. Hence, it is important for Angular 9 developers to redesign and decrease the size of downloadable files, to increase the mobile user experience. By reducing the size of JavaScript bundles, Ivy opens a platform for developers to speed up the application.

Allows for better debugging

Debugging is one of the many features of IVY compiler and runtime. For developers, it is difficult to develop a program that is completely bug-free. That is why it is important to equip the codebase with tools and techniques to flesh out the bugs themselves. The Angular framework in Angular 9 uses some unique techniques and tools to debug its applications. With these:-

-one can ask Angular for access to instances of the components and directives.

-can trigger change detection with applyChanges

-one can manually call methods and update state.

Adds improved type checking

The Angular compiler checks the expressions and bindings within the templates of the application and reports any type errors it finds. The bugs are caught and fixed early in the development process. The Angular 9 currently has three modes of doing this. Apart from the default flag, the other flags that the angular supports are:

fullTemplateTypeCheck — By activating this flag, the compiler will check everything within your template (ngIfngForng-template, etc)

strictTemplates — By activating this flag, the compiler will apply the strictest Type System rules for type checking.

Have a look at the Template type checking guide in the documentation.

Faster Testing

The implementation of the TestBed in Ivy, makes it more efficient to arrange the components between tests. This avoids recompilation between the grand majority of tests. With this change, the framework’s core acceptance tests are about 40% faster. User’s own application test speeds will be around 40–50% faster.

Improved build errors

The new compiler Ivy is not only efficient but also provides safety. Ivy speeds up our build times significantly. It gives less time for the builds to complete. This enables all the error messages easier to read.

Enables the AOT compiler on by default

In the new IVY architecture, we see a significant change in the compiler’s performance. This means that the AOT builds will be noticeably faster. The change in the compiler and runtime, would no longer require entryComponents. andng serve. These components in Angular 9 will compile automatically depending on their usage.

Selector-less directives in Ivy

Selector-less directives as base classes were already supported in the old ViewEngine but were missing in the Ivy preview in Angular 8. This has now been added to Angular 9.

Improved Internationalization (i18n)

Internationalization is an important Angular 9 feature. The new solution appears with Angular 9 which balances most of the drawbacks without losing performance. Initially, the latest @angular / localize produced one building, followed by a translation of texts consolidated in a copy and Ivy makes it easier to carry out the whole process. Know more about IVY, what is ivy?

The Phantom Template Variable Menace

Initially, phantom variables were not cited in the template’s associated component. Creating these phantom variables can usually threaten our applications. With Angular 9 one gets a compiler error when a template variable is created that has not been defined in a component.

More reliable ng update

The ng update performs a basic update to the current stable release of the core framework and CLI by running the following command. Further updates have been made to this to make it more reliable and informative. The updates will now use the latest CLI and take advantage of newer updates automatically. It will also give updates and information about each migration.

This new angular 9 feature also comes in with the new --create-commits flag. When we run ng update --create-commits, the tool commits the state of our codebase after each migration, to debug the changes made to the code.

API Extractor Updates

Angular depends on many other services and libraries to function effectively which are usually difficult to maintain and update. In this new version, these libraries are tracked and updated using Bazel which detects the API landscape of these libraries, produce reports, find out missing updates or new features and documents in such a way that they are communicated easily.

New options for ‘providedIn’

This angular 9 feature provides us with some additional options while create an @Injectable service in Angular.

  • platform— The providedIn: 'platform' makes the service available in a special singleton platform injector that is shared by all applications on the page.
  • any— Provides a unique instance in every module (including lazy modules) that instills the token

Component Harness

Another Angular 9 feature is to offer an alternative way to test components. By disconnecting the implementation details, one can make sure that the unit tests are correctly audited and less frail. Angular 9 is making harnesses available to any component author as part of the Component Dev Kit (CDK). In Angular 9, changes have been made to the compiler and runtime, and so we no longer need to identify this in the entryComponents array. Angular will find the component by its own. However, Angular will not remove the component from the entryComponents array by itself for us. Hence we need to search our code after updating and manually remove them and then test.

Future of Angular 9

A key goal of Angular 9 is to make the available for all apps. The main benefit of Ivy is to reduce the size of applications for better user experience.

With the advent of Angular 9, the community can benefit from smaller, high-performance applications. This will result in better developer experience. Developers also now have clear insight into the syntax and the project structure.

In the future, the team is likely to work on developing components and directives. The Angular team has notified that there won’t be any need for a major API change. Advanced developer experience is always something to look forward to. An article on InfoWorld by Paul Krill reveals that Angular 10 has a target date set for a May 2020 release. We will have to wait to see if that is true.

 

Checkout our latest blog on – WADP Blogs

Change Log Angular 9: Check out the new Ivy compiler and runtime