Angular v10 is here – How the Latest Release Brings Benefits to App Development?

The tech giant Google just unveiled its latest Angular version 10 on 24th June with lots new and updated features. Despite being a great round number, Angular is a small release when it comes to the number of features added. However, it is nice to see that the Angular team has digging hard into the open issues of GitHub.

The community of Angular is so large that there are several meetings and discussions where Angular developers have to share their reviews or ways on how to make Angular more convenient in terms of App development.

Installing Angular 10

You can install Angular 10 on your system simply by adding the below code into your Command Line Interface:

$ npm install –global @angular/cli@next

For installing the latest version of Angular, use the ‘next’ tag to carry with your command. Through this, you can easily get the pre-release and latest version of Angular 10. If you want more information of the Angular 10 beta version installation, then you can visit Github repository.

Top Features of Angular 10

Angular’s latest release (Angular v10) has come up with lots of new features and updates. Let’s open the box and explore;

Support for TypeScript 3.9

If we talk about Angular 9, it was released with TypeScript 3.7 support. Soon after that TypeScript 3.8 was released and was supported by Angular 9.1 and vice versa with TypeScript 3.9 and Angular 10.

Angular has always stayed up-to-date. TypeScript 3.9 is equipped with some powerful improvements that have resulted in faster Angular builds for larger projects. Secondly, all the fixes and features of typescript are accessible by Angular developers.

Service Worker

Since Angular 8, the Service worker package is providing registration strategies. It now includes the opportunity to set a timeout for the registerWhenStable strategy, with registerWhenStable:TIMEOUT.

In case, if the app doesn’t stabilize even after the timeout, the Service Worker will register it anyway. It tends to be convenient if your application has a repetitive asynchronous task, as it will never stabilize.

If you aren’t defining a timeout, the ServiceWorker will presently register the following 30 seconds by default.

Breaking Changes

If any resolver shows empty under this section will happen to cancel the navigation. For enabling navigation, Angular developers have to update the resolvers to value like default!Empty.

Logic is updated relating to designing day terms that cross midnight, to coordinate the time inside a day period that reaches out past midnight. Just because of these alteration, there are several apps that uses DatePipe, FormatDate and numerous design codes will be apparently changed.

Core

This is quite an interesting feature, among all the others. Every warning logged in Angular 10 will be termed as an error. It is mandatory to use Generic for ModuleWithProviders in this new version.

The Ivy compilation & rendering pipeline guarantees that if Angular developers are using View Engine, no build error will be given. For this situation, ngcc won’t have the option to help and the relocation might cover the application code.

Router

For the router, the CanLoad guard presently can return Urltree. A CanLoad guard returning Urltree drops the current navigation and redirects. This matches current performance accessible to CanActivate monitors that likewise has been included.

This won’t influence preloading. A CanLoad guard will help you to obstruct any preloading; any routes with a CanLoad guard won’t be preloaded, and the guards won’t be executed as a component of preloading.

Angular Material

Angular Material is now equipped with a new date range picker. You can choose mat-date-range-input & mat-date-range-picker components for using the new date range picker.

Converting pre-Ivy code

The code of the Ivy can be only linked against other Ivy code for building the app, it is vital to convert all the pre-Ivy dependencies from npm to Ivy dependencies.

This conversion must occur as an antecedent to running ngtsc on the application, and future compilation and linking activities should be made against this changed version of the dependencies.

Depreciations and Removals

IE9, IE10, and IE Mobile Support has been frowned & will be dropped later. The primary reason behind this was to expand the bundle size.

Bazel build schematics will be discontinued. The angular group clarified the reasons and assigned to this monorepo as a source to watch out for if you are keen on building Angular with Bazel.

Conclusion:

Ideally, the team of Angular releases two versions in a year. The previous version of Angular 9 was out in February i.e. only four months prior, and subsequently, the team is as of now looking to release Angular 11 in the fall.

To all the businesses and people who are actively looking to hire AngularJS Developers for their projects, it is vital to look out for a partner who is trusted & reliable to team with, the one who will guarantee a smoother path forward.