What is New in Angular 13 & 14

Hey there.. I am back… From the last couple of quarters I am focusing on different new things in Angular. A couple of years back, I started working on Angular for the first time with version 9 and from last year I am trying to keep myself upgraded on Angular even if I need to work on older versions sometimes as a part of my daily project work.So to keep this learning as a practice, initially, I learned Angular 12 and wrote a blog on my learning and new things in Angular 12, then in this quarter I learned new things in Angular 13 and 14. Few weeks back I also explored the Angular upgrade from Angular 9 to Angular 14 and wrote a blog on the same.
In this blog I will be writing what are the new things Angular has included in Angular 13 and Angular 14. For this blog, I took a reference from an Angular official document and few other information sources on internet.

So, let's start with ‘What is new in Angular 13’. Angular 13 is released in November 2021

• Node JS older than 12 is No longer supported - Angular 13 now only supports Node JS version 12.0 or greater. The latest version of Node.js when Angular 13 released was the 16.13.0. There are some breaking changes due to this update.

• Typescript 4.4 support Module - In Angular 13, the support for TypeScipt is added from 5th October 2021. The TS versions older than 4.4.2 are no longer supported.

• APF Changes - The Angular Package Format(APF), has been streamlined and modernized to better serve developers. Also, the APF support to Node Package Exports updated, and this will help developers for inadvertently relying on internal APIs that may change.

• RxJS Version Updated - Basically in Angular, RxJS is used for the Subscriber and Observable. It is also used for State Management in Angular. In Angular 13, the version of RxJS is upgraded from 6.x to 7.4.

• Improvements to Angular CLI - In Angular 13, now supports the use of persistent build cache. The persistent build cache is a feature that caches build results on disk (under the .angular/cache folder). And this results in up-to 68% improvement in build speed. Users will need to make changes in angular.json to enable this.

• View Engine is no Longer Available - I have explained what is View Engine in my Angular 12 Blog. In Angular 13, View Engine is completely replaced with the Ivy Engine. It is the next generation compilation and rendering pipeline. The reason behind removing the View Engine is ‘Performance’ and hence after removing the View Engine, angular 13 became a little lighter.

• IE11 Support Completely Removed - In Angular 13, the Internet Explorer 11 (IE11) support was completely removed, and because of it Angular 13 became lighter because it required the polyfill files which are now removed because of this.

• Improvements in Validations - In Angular 13, now we can enable Email, Max, Min etc validations dynamically.

Other Changes - There are few more changes in Angular 13 below,
- Validation error messaging improved
- Resolved bugs in $localize and now it become more stable
- Improved the TestBed which will enable better job of tearing down test modules

Now, let’s talk about the Angular 14 new features. Angular 14 was released in June 2022. Below are the new things in Angular 14

• Standalone Components - Standalone Components are the components which do not depend on other things. Now in Angular 14, no need to import the modules in the Module.ts file file which was required before to do. Developers now can import it directly in the component.ts file. To make this change, developers need to use ‘--standalone’ param while generating the new component. This will add the ‘standalone: true’ property in the @component directive of the newly generated component. The benefit of this new feature is, if developers have multiple components which use the different modules, no need to add them in module.ts, rather developers can add them only in required components.

• Extended Developer Diagnostics - In previous versions than Angular 14, if there was an error in the file, it was only showing in the code behind file but was not if I am defining the HTML UI template. Now, in Angular 14, it will also show in the HTML template with the details.

• Page Title Accessibility - In previous versions than Angular 14, it was very difficult to change the title of the page, but now it is very easy to set it up dynamically.

• Typed Angular Form - In Angular 13, in the reactive forms, the system was allowed the untyped form controls without any error, but now from Angular 14, it will give developers an error message if the developer uses the Untyped form. To resolve it, developers will need to use the class name ‘UntypedFormControl’

• Angular CLI Enhancement - There are some enhancements in the Angular CLI over the previous versions,

  • ng analytics - Now, your angular project can be directly connected with google analytics to check the information. By default it is disabled but you can enable it if you want.
  • ng completion - When running the commands, developers generally make typos, to resolve this problem the Angular CLI will provide you the auto-completion for your command and will will reduce command line typo errors
  • ng-cache - Now you can enable/disable the browser cache using the command line.

Summary- So, based on the above discussion, one thing is very much clear that Angular is adding a number of interesting and advanced features in every major release which will make the developers life easy by providing developer specific features; better experience by providing analytical and performance related features. And it is still continuing, so as a developer we can definitely keep an eye on the each major release and keep upgraded the project and the ourself.

Happy Reading!!