The new release of Angular i.e. version 9 is here with some tweaks or enhancements in the framework, Angular Material, and CLI. The Angular 9 release date is the 7th of February, 2020. This Angular 9 new update with Ivy also switches to the compiler comes with Ivy and default runtime. Enhanced testing methods for the components is also introduced with the release.
In this article, we will be discussing almost everything that is there to be known by the release of Angular 9 along with Ivy as its default rendering engine. There are many enhancements, improvements, and other tweaks done with the Angular 9.
Angular History
The Angular definition is that it’s a web application framework, based on TypeScript. It is an open-source framework that can be used to create applications on the JavaScript and interactive web pages as well. It has received massive interest partly as the framework it comes with is great, and partly because of a team at Google that keeps working on its growth.
Initially, the team called AngularJS to rewrite as Angular 2. The issue with that was the developers were getting confused due to this. The announcement was made by the developer’s team that different terminology of “AngularJS” relating to the 1.X versions and “Angular” should be used for each application, without the “JS” corresponding to the versions 2 and up.
Angular Basics and Version History
Angular Version 2: On September 14th, 2016 version 2 of Angular was released. There was a huge controversy due to drastic changes. It first moved to the alpha followed by the developer preview and then the beta version came.
Angular Version 4: The features of version 4 included disabling of animations conditionally, HttpClient was introduced, four new events of the router life cycle. Also, there was backward compatibility with version 2.
Angular Version 5: The material design was improved in this version and some tweaks were made in the support for build optimizer and progressive web apps. Its release date was the 1st of November, 2017.
Angular Version 6: It was one of the major releases of Angular. On the 4th of March, 2018, this version was released. The major focus was on the toolchain in place of the underlying framework.
Angular Version 7: It was released on the 18th of October, 2018. It supported content projection along with improvements such as angular material and CDK, application performance, and many more.
Angular Version 8: The Angular 8 release date was the 28th of May, 2019. The features of Angular Ivy opt-in include fast re-build time, backward compatibility, easily readable code generation, improvement in the size of payload and template type checking. This new version came with web workers, dynamic imports, and support for TypeScript 3.4.
Angular 9 New Features
We have discussed some of the best angular 9 features/angular 9 new features below:
Reduced Bundle Size:
The handling of the components by Angular has been improved because of the Ivy compiler which reduces the size of the files as a result. Additionally, tree shaking is used by Ivy that allows it to include only the Angular parts required for the existing application. While the improvements are taking place, according to Google, up to 40% of the bundle size can be reduced with it.
These advancements, however, applications that use only a limited subset of Angular capabilities like smaller applications are only targeted and large applications that are suffering from large sizes of the factories. With the use of Angular, it will be fascinating to find how the generation of Web Components is affected due to the decreased sizes of the bundles. From some time, the ability is already here of creating the Web Components, generally, the resulting component sizes were very large to be declared as useful.
Improved Build Process:
Angular applications are able to compile even more quickly with the help of the Ivy compiler. According to Google, there is an increase of 40 percent in their documentation software for angular.io. The usage of AOT (or Ahead of Time) has also started due to new processes compilation during the development process (when using ng serve) in addition to the usual advantage of faster compilation times.
Prior to this, because of the long compilation time required, AOT compilation had been limited to production builds only, resulting in some special cases where builds failed in the production but still were able to pass int he development. Two final new improvements are included in the new build phase. The need to use the ‘entryComponents‘ array has been discontinued within the definition of NgModule that was required during the creation of dynamic components. The inclusions also had better treatment of errors, that should streamline the process of debugging.
Better Debugging:
Ivy exposes a set of new capabilities on the global ng object while running Angular applications in debug mode allowing developers to manually update state/trigger change detection, call methods, and access the components’ instances. The stack trace generated when Angular finds an error is also enhanced by Ivy, and now it offers even more precise links to the templates and codes that are infringing.
CSS Handling:
It is one more strengthened area that comes with the new angular releases. Where a specification included conflicting meanings for a style in earlier releases, such styles would replace each other irrationally. The types are combined in a predictive manner with Ivy.
Type Checking:
The Angular compiler is now able to check even more forms and be able to apply stricter regulations. The developers may take their help for the purpose of finding bugs in the development process faster.
What’s Ivy?
Ivy is the pipeline of rendering and compilation of the next-generation. It is very advanced and offers advanced features that were not available before. The speed provided by it is amazing. The loading is very fast even in the networks that are slow. It is very simple to use without any complications. The bundle size is also reduced with its help. It was first available in the Angular version 8 with Angular Ivy opt-in.
Locality and tree shaking are two key aspects that Ivy always considers. They both are able to make Ivy capable of what it can do. The process of independent compilation of every component with its information. The partial changes are compiled in the process that makes the process faster by not changing all the project files.
The future of Angular with Ivy
If we consider in the short-term, smaller bundles are there but have better potential in the near future. It is now time that the team can start working on some additional features. Working on high-order components or metaprogramming is now possible to work upon. Template crafting by users manually can also be possible. The team can also make the components of AoT and JiT to work altogether.
How to Upgrade to Angular 9 Ivy?
All the changes have to be committed to git before you update to Angular 9 Ivy from Angular 8. Node version v10.13 or later has to be used. The best supported and recommended version is Node 12.15.0 LTS.
Then, the below command needs to be run. It will update @angular/cli and @angular/core, and package.json.
ng update @angular/core@8 @angular/cli@8 Afterward, run below command.
ng update @angular/core @angular/cliThe things that CLI is updated throughout the process will be shown on the screen by it. The modifications in the files will also be seen on the screen. When this process gets completed, move to package.json. That will help you in checking that if you have updated to the Angular 9 Ivy. Now, you will be able to use the latest features provided by the new version of Angular.
Conclusion
Improvements in the build times or smaller bundle sizes and enhanced debugging are some of the new added features or enhancements made available in Angular 9, which is the very popular Google’s major release i.e. JavaScript SPA (Single Page Application) framework. All of the enhancements in the Angular 9 come with the help of the Ivy rendering engine that was also released with it and Google has been developing it since the year 2018. The Angular 9 release notes included that it is now the runtime and compiler as default and it also enables the AOT compiler.
The components’ or directives’ instances are easier to access by just Angular to do it. The methods to call can be manually set or to update the state. Angular 9 tutorial is now easier with the Angular 9 GitHub as the developers can learn from there also as it is a hub of developers who are experts and can collaborate with you in your projects also.
See the changelog of the latest version (i.e. 9.1.0-next.3) updated on the Angular Github repository.
Try Live Characters & Words Count Online
Read Next: Best Chrome Extension for Developers
You’re an extremely useful web site; couldn’t make it without ya!