Catch Up The Recent Angular 11 Updates

Profile picture for user Anni Joice
Designation
Dev

Anni Joice

Dev

Angular 11 updates

Angular 11 Updates - Lining Up For The Better

Angular, Google’s JavaScript (TypeScript) framework is meant for building web, mobile, or desktop applications. Angular 11 was released on November 11, 2020. In this blog, you will get to know more about the Angular 11 Updates, how we can lint, log, and inline fonts, as well as a few other items.
Here Are Some Awesome Angular 11 Updates & Features:

Updates On Operation Byelog:

Firstly, it's the Operation Byelog, where the angular team concentrated on spending a substantial engineering effort in triage problems and PRs, before providing a good understanding of the extensive needs of the group. It can now be confirmed that the initial target is over! 
In each of the three monorepos that will continue with this as an ongoing endeavor as new issues are identified, all the issues have now been successfully triaged. This approach has also addressed a few common issues in the router and forms. All the problems can now be reviewed, this allows to reduce the size of the Angular backlog and solve loads of problems. 

Router:

In the earlier versions, there was a question about future and next routes being exchanged for child routes when using the RouteReuseStrategy #shouldReuseRoute process. This issue is fixed in Angular 11 and also preserveQueryParams was discontinued, but users would have to use queryParamsHandling = "preserve" instead.

Forms:

Angular 11 updates have made changes to boost the typing of previously inaccessible validators and asyncValidators. The AbstractFormControl.parent class in angular 11 contains a null that is included in the .parent types. Migration version 11 adds a non-null assertion operator whenever needed. In earlier versions, the FormControl, FormGroup, and FormArray classes had async validators specified at the time of initialization. In the new edition, the status event is emitted into the statusChanges observable.

Faster Builds:

In this latest update, the Angular team dropped supporting typescript 3.9. Now, Angular 11 will only support Typescript 4.0 and also uses Ngcc- Angular compiler. The main reason for this up-gradation is to speed up the builds. Angular 11 ensures much faster builds four times than the previous one. This implies that users would have to spend relatively less time waiting to complete builds and rebuilds.

ESLint Updates:

The previous versions of angular had a default implementation for linting that is the client. For a long period of time, it was reportedly one of the most common linting tools. Angular version 11 has got deprecated the use of TSLint and Codelyzer. The default implementation for Linting Angular projects will not be available in the future update. The angular team recommended migration to ESLint. It also has been tested to ensure a smooth transition for Angular devs.

Webpack 5 Support:

A webpack aids you to incorporate many documents into a single bundle or single record. Version 5 of Webpack is the latest version that was launched a few months ago. In order to be stable, it also needs time. Angular plans to direct this route and make it possible to create faster with very persistent disc caching and even smaller package sizes with cjs tree-shaking. 

Note: We need to remember one thing, it’s still experimental so do not use it in the production mode. We can experiment with the module federation. 

In the future webpack v5 will have a clear path for:

  • Faster builds and disk caching
  • Smaller bundles with cjs tree-shaking

To try out Webpack 5, add the following section to your package.json file.

"resolutions": {
     "webpack": "5.4.0"
}

Note: We need to use yarn to test this, as npm doesn’t work yet.

Improved Reporting & Logging:

This latest version of Angular also incorporates new improvements in the manner in which reporting on the building stage is carried out during development. In order to make logs and even reports generally easy to read, new improvements have now been made to the CLI.

Angular 11 updates

Updated Hot Module Replacement Support (HMR) :

Hot Module Replacement is a mechanism that enables the replacement of modules without a complete refresh of the browser. HMR for Angular is not an entirely new thing and developers were already able to use it for previous versions. One of Angular 11's updates and new features is that it presents HMR assistance with necessary configuration and code adjustments that make it less than ideal for Angular to be included efficiently. They have provided a CLI command for that. We can simply use the “ ng serve” command with an “hmr” tag to enable HMR:

ng serve --hmr

Component Test Hardness:

Component Test Hardness is first introduced in Angular V9 which provides supported APIs to interact with other components. Such APIs are capable of communicating with the components in a manner close to that of end-users, and tests may separate themselves from the DOM changes.
At that period, only angular material was supported by this process. But with the most recent update, for all components, a Component harness is available. It allows the developers to create more robust test suites.
By allowing developers to run several asynchronous interactions with components in parallel, the parallel feature makes it easier to deal with asynchronous behavior in your tests. For more details about the API.

Updated Language Service Preview:

Previous versions use the View engine for the Language service. Angular 11 offers a new Ivy-based language service that is more efficient and precise. Although this function is still being developed, it can behave similarly to the TypeScript compiler. This gives you the best hands-down angular experience and within your templates, it will be able to infer generic types just as a TypeScript compiler will do. Look at the picture below for a clear illustration of the iterable string form is assumed.

Angular 11 updates

Conclusion:

Hope you got a quick overview of the features they introduced as Angular 11 updates. If you want to find more information on this. Kindly check out their blog as well. If you’re interested to upgrade your projects to Angular 11, you need to run the following command in the terminal, ng update @angular/cli @angular/core. Looking forward to the next versions of angular with more fascinating and new features on the go.

Also, Enjoy Reading: Angular Components Interaction Methods - A Quick Study

Profile picture for user Anni Joice
Designation
Dev

Anni Joice

Dev