Google has released the newest version of the foremost popular typescript-based framework, Angular. Angular 11 became available as a production release on 14th November. The remake of the only page application framework focuses on improving the developer experience by addressing the bug issue raised by the community. the discharge offers several improvements, getting to simplify the event process, easing things out for each angular development company .
Following the many changes made in Angular 9 with the discharge of iVY, the support for Typescript 3.8 in Angular 9.1, and therefore the modification within the Angular Material UI component library in Angular 10, the Angular development team decided to dedicate the subsequent releases to deal with the problems of bugs and few other concerns that are accumulating over the years. The goal has been finally achieved after nearly six months of labor with Angular 11. The GitHub issue tracker has been organized to triage the new bug issues within 2 weeks.
Features & Updates of Angular 11
The Google-developed web framework has come up with a replacement version as a production release. The highlight of this version is router performance improvements, automatic inlining of fonts and stricter types. With the router performance apps are made faster. The Compile time downloads and inline fonts that are used and linked within the application. Angular 11 features the default Automatic font inlining which will be enabled for the applications that are updated. there’s such a lot more to those new features of Angular 11, which we are determined to seek out call at this blog.
1. Updated Hot Module Replacement (HMR) Support
Hot Module Replacement may be a mechanism that permits the modules to get replaced without a full browser refresh. it’s an old concept for Angular where developers have worked with HMR within the earlier versions. one among the exciting and new features of Angular 11 is that it offers support for HMR with required configuration and code changes that make it but ideal to quickly include in Angular. This wasn’t enabled within the earlier versions. Angular 11 allows the CLI to enable HMR(the dev server) while starting an application with ng serve. Run the subsequent command to urge started with:
ng serve –hmr
The console will display a message after the local server starts confirming that HMR is active. within the development stage, the newest changes to components, styles and templates are going to be instantly updated into the running application without requiring a page refresh. the info typed into forms are preserved providing a lift to developer productivity.
2. Updates on Operation Byelog
The angular Roadmap is one the things was Operation Byelog where the angular team had focused on investing a big engineering effort towards triaging issues and PRs, before having a transparent understanding of the extensive community needs. It are often now reported that the initial objective is finished! All the problems have now been successfully triaged in each of the three monorepos which will proceed with this as an ongoing effort as new issues get reported. This process has also solved a couple of popular concerns within the router and forms (see below). and every one the problems will now be triaged within 2 weeks of the occurrence, which has reduced the dimensions of the Angular backlog and resolved plenty of issues.
3. Automatic Inlining of Fonts
Angular 11 features automatic font inlining that converts your Google Fonts and Icon to inline in index html. this may happen whenever you set the below flag in your angular.json under the build option. The Angular CLI will download and inline fonts during compile time that are getting used and linked within the application. These features of Angular 11 are enabled by default for production configuration. All you would like to try to to to require advantage of this optimization is to form sure the web connection is out there during the build if the build is running on CI. you’ll also got to update your applications to enable this by default in apps built with version 11.
“configurations”: {
“optimization”: true
}
you’ll disable this optimisation by changing the flag to below snippets
“configurations”: {
“optimization”: {
“fonts”: false
}
}
OR
“configurations”: {
“optimization”: {
“fonts”: {
“inline”: false
}
}
}
4. Component Test Harnesses
The Component Test Harnesses was introduced in Angular version 9. they provide a strong and legible API surface that helps to check the Angular Material components. It provides how for developers to interact with Angular Material components by using the supported API while testing. this is often one among the angular 11 benefits where the developers can more robust test suites by providing harnessing for all of the components. We also get to ascertain something new in Angular 11, that’s the parallel function, performance improvements and new APIs.The parallel function works with asynchronous actions within the tests by letting the developers to function multiple asynchronous interactions with components in parallel. With the manual change detection function, developers can disable the automated change detection in unit tests and access the finer-grained control of change detection.
5. Deprecations and Breaking Changes:-
- TypeScript 4.0 Support
The angular team in version 11 has dropped the support for TypeScript 3.9 and only supports TypeScript 4.0, only to hurry up the builds. - Roadmap
The roadmap has been updated together of the new features of Angular 11 on in-progress projects. This approach reflects the larger efforts allowing the developers to supply early feedback that are to be incorporated into the ultimate release. - Pipes
Angular 11 has fixed the typing for date and number pipe which earlier wont to take any type as input. within the DateTime, Datapipe will round off the millisecond part to the closest millisecond provided. The async pipe won’t return null anymore as a worth for an undefined input. this will cause compilation errors which is why it’s still a breaking change, however, actually uncovers invalid usages. - Browser Support/cleaning
The support for IE 9, 10, and IE mobile in angular 11 is removed. They were only deprecated within the version 10 release, but they’re discontinued during this version. Angular however still supports IE11 because the only version. Angular 11 also has removed obsolete API and a number of other functions has been added to its deprecated list. - Angular Universal
In angular 10, the team had got a component to utilize absoluteUrl when working with SSR. The Angular 11 release must have the baseUrl parameter for using useAbsoluteUrl baseUrl which will override the protocol, hostname, and port.
6. Feature to Extract i18n tokens from library
The new release of angular 11 allows you to extract the i18n tokens from angular libraries too by using the below command with the library.
ng xi18n –ivy
7. Angular Flex-Layout
Angular 11 has also updated the flex-layout module of Angular. the discharge supports the beta version (11.0.0-beta.33), which it works pretty fine for production.
8. Prompt for Strict Mode
Angular 10 had a flag –strict for generating the angular application. In angular 11, with all strict checks enabled, users will now get a prompt to see whether you’ll enable it because the below image. the additional package.json which was created inside the app folder within the earlier versions will not be created to avoid confusion among the community members.
9. Angular CLI generator for resolvers
The Angular CLI in angular 11 will now generate resolve guards:
ng g r/resolver
10. Update to urge version 11
When you are able to update tho version 11, run the below command:
ng update @angular/cli @angular/core
Conclusion
Angular releases two versions a year, at the interval of six months. With the angular version 11 release date being the 14th of November, we should always expect subsequent version within the half-moon . during this article, we’ve explored what’s new in Angular 11. this is often an enormous release with variety of interesting features and sort safety improvements for pipes and reactive forms. We are expecting subsequent version of Angular that’s alleged to bring us a number of the fascinating features like Ivy-based language service andAngular 11 support of Nrwl NX, which shouldn’t take long.