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!
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
-one can manually call methods and update state.
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 (
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.
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.
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.
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
ng serve. These components in Angular 9 will compile automatically depending on their usage.
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.
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?
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.
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.
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.
This angular 9 feature provides us with some additional options while create an
@Injectable service in Angular.
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
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.
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
Please contact us using the information below. For additional information on our management consulting services, please visit the appropriate page on our site.