Google has released the latest version of the most popular typescript-based framework, Angular. Angular 11 became available as a production release on 14th November. The new version of the single-page application framework focuses on improving the developer experience by addressing the bug issue raised by the community. The release offers several improvements, aiming to simplify the development process, easing things out for every angular development company .
Following the significant changes made in Angular 9 with the release of IVY, the support for Typescript 3.8 in Angular 9.1, and the modification in the Angular Material UI component library in Angular 10, the Angular development team was determined to dedicate the following releases to address the issues of bugs and few other concerns that have been accumulating over the years. The goal has been finally achieved after nearly six months of work with Angular 11. The GitHub issue tracker has been organized to triage the new bug issues within 2 weeks.
The Google-developed web framework has come up with a new 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 in the application.
Angular 11 features the default Automatic font inlining that will be enabled for the applications that are updated. There is so much more to these new features of Angular 11, which we are determined to find out in this blog. So let's see, what’s new in Angular 11?
Hot Module Replacement is a mechanism that allows the modules to be replaced without a full browser refresh. It is an old concept for Angular where developers have worked with HMR in the earlier versions. One of the exciting andnew features of Angular 11 is that it offers support for HMR with required configuration and code changes that make it less than ideal to quickly include in Angular. This was not enabled in the Angular v10. Now with the latest version it allows the CLI to enable HMR (the dev server) while starting an application with ng serve. Run the following command to get started with:
ng serve --hmrThe console will display a message after the local server starts confirming that HMR is active. In the development stage, the latest changes to components, styles, and templates will be instantly updated into the running application without requiring a full page refresh. The data typed into forms are preserved providing a boost to developer productivity. This is one of the favorite Angular 11 new updates.
The angular Roadmap is one the items was Operation Byelog where the angular team had focused on investing a significant engineering effort towards triaging issues and PRs, before having a clear understanding of the extensive community needs. It can be now reported that the initial objective is finished! All the issues have now been successfully triaged in each of the three monorepos that will proceed with this as an ongoing effort as new issues get reported.
This process has also solved a few popular concerns in the router and forms (see below). And all the issues will now be triaged within 2 weeks of the occurrence, which has reduced the size of the Angular backlog and resolved tons of issues.
Angular 11 features automatic font inlining that converts your Google Fonts and Icon to inline in index.html. This will happen every time 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 being used and linked in the application. These new features of Angular 11 are enabled by default for production configuration.
All you need to do to take advantage of this optimization is to make sure the internet connection is available during the build if the build is running on CI. You will also need to update your applications to enable this by default in apps built with version 11.
"configurations": {
"optimization": true
}
You can disable this optimisation by changing the flag to below snippets
"configurations": {
"optimization": {
"fonts": false
}
} OR
"configurations": {
"optimization": {
"fonts": {
"inline": false
}
}
}The Component Test Harnesses was introduced in Angular version 9. They give a robust and legible API surface that helps to test the Angular Material components. It provides a way for developers to interact with Angular Material components by using the supported API while testing. This is one of the angular 11 benefits where the developers can more robust test suites by providing harnessing for all of the components.
We also get to see something new in Angular 11, that is the parallel function, performance improvements, and new APIs.The parallel function works with asynchronous actions in the tests by letting the developers function multiple asynchronous interactions with components in parallel. With the manualChangeDetection function, developers can disable the automatic change detection in unit tests and access the finer-grained control of change detection.
Angular 11 features the Angular Language Service that provides helpful tools to develop productivity and fun within the Angular environment. The current form of the language service depends on View Engine that provides a more powerful and accurate experience for developers. Angular 11 changes this norm for the language service to correctly infer generic types in templates just like how the TypeScript compiler does. This powerful new angular 11 feature is still in development and provides a new more powerful and accurate Ivy-based language service.
Read More: Angular 10 New Features and Ivy Compiler
Angular 11 has brought in faster development and build cycle that makes updates into some key areas. These areas are:
The ngcc update process will be up to 4x faster as a new change in Angular 11. This means users will have to spend comparatively less time waiting for builds and rebuilds to complete. The Angular contributor Joost, while profiling the Angular compiler, had to make the Typescript compiler faster for improving the Ngcc! This change lands in Typescript 4.1 so that when Angular supports Typescript 4.1 in further versions, it will get you faster builds.
Angular 11 improvements involve a team that can opt-in to webpack v5. A webpack is used to incorporate countless documents into a single bundle or single record. Webpack version 5 is the latest version that was released a couple of months back. It still needs time to be stable. At the moment, one can experiment with module federation. This webpack v5 in the future will clear the path for:
Add the following section to your package.json file for trying out webpack 5:
"resolutions": {
"webpack": "5.4.0"
}Angular 11 will need to use yarn to test this because the npm does not support the resolutions property yet.
The previous versions of Angular have been shipping a default implementation for linting (TSLint). It was supposedly one of the most popular linting tools for a long period of time. Angular version 11 has deprecated the use of TSLint and Codelyzer as an important part of the Angular material changelog. POst this, the future version will not have the default implementation for linting Angular projects.
As one of the important changes in Angular 11, the TSLint is deprecated by the developers who recommend migration to ESLint. The open-source community developed a third-party solution and planned a migration through typescript-eslint, angular-eslint and tslint-to-eslint-config. To ensure a smooth transition, the Angular developers have collaborated to the supported linting stack.
One of the main differences between angular 10 vs Angular 11 is that in the earlier versions while using RouteReuseStrategy #shouldReuseRoute method, there was a concern regarding future and next routes being traded for child routes. This issue is fixed in angular version 11 however you need to adjust your code if you are using it in your code already.
preserveQueryParams has been discontinued in angular 11, instead, users will have to use queryParamsHandling=”preserve”.
In this version the new parameter types allow a variable of type NavigationExtras to be passed in, however, they will not permit the object literals, as they may only specify known properties and types that do not have properties in common with the ones in the Pick. In order to fix this, users can specify properties from the NavigationExtras that use a type assertion on the object or variable: as NavigationExtras.
Angular 11 has made amendments to improve the typing for validators and asyncValidators that were earlier not available. These arguments are properly typed for your code to rely on directive constructor types as it may require some updates to improve type safety. Type of AbstractFormControl.parent in angular 11 includes null that is included in the types of .parent.
Angular recent changelogs adds the non-null assertion operator wherever necessary. The FormControl, FormGroup, and FormArray class in the previous versions had async validators defined at initialization time. In the new version, the status event is emitted into the statusChanges observable.
The angular team in version 11 has dropped the support for TypeScript 3.9 and only supports TypeScript 4.0, only to speed up the builds.
The roadmap has been updated as one of the new features of Angular 11 on in-progress projects. This approach reflects the larger efforts allowing the developers to provide early feedback that are to be incorporated into the final release.
Angular recent version has fixed the typing for date and number pipe which earlier used to take any type as input. In the datetime, datepipe will round off the millisecond part to the nearest millisecond provided. The async pipe will not return null anymore as a value for an undefined input. This can cause compilation errors which is why it is still a breaking change, however, actually uncovers invalid usages.
The support for IE 9, 10, and IE mobile in angular 11 is removed. They were only deprecated in the version 10 release, but they are discontinued in this version. Angular however still supports IE11 as the only version. Angular 11 also has removed obsolete API and several functions has been added to its deprecated list.
In angular 10, the team had got a component to utilize absoluteUrl when working with SSR. The Angular 11 stable release needs to have the baseUrl parameter for using useAbsoluteUrl baseUrl that will override the protocol, hostname, and port.
Users will have to use IterableChangeRecord as in the early versions, as the CollectionChangeRecord has been deprecated now .
In the earlier versions the calling TestBed.overrideProvider after TestBed instatement had no impact, users will now get an exception if they attempt to do this.
Angular 11 changelog involves the removal of the ViewEncapsulation.Native. Instead, in this new release, you can use ViewEncapsulation.ShadowDom. The ng update will automatically update the existing pages.
In the earlier versions async/await for async tasks was used while writing the e2e test cases. In Angular 11, the CLI will no longer generate the protractor config to handle the async scenarios with SELENIUM_PROMISE_MANAGER like it was earlier used.
The earlier versions named outlets that always supported the component. There wasn't any way out to lazy load the module using the named outlet. You can use it now with Angular 11, with the following command.
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.
Angular 11 update also includes the addition of the flex-layout module of Angular. The release supports the beta version (11.0.0-beta.33), and that it works pretty fine for production.
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 check whether you can enable it as the below image. The extra package.json which was created inside the app folder in the earlier versions will no longer be created to avoid confusion among the community members.
The Angular CLI in angular 11 will now generate resolve guards:
ng g r/resolve <name> When you are ready to update to version 11, run the below command:
ng update @angular/cli @angular/core 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 be expecting the next version in the first quarter. This is a big release with a number of interesting features and type safety improvements for pipes and reactive forms. We are waiting for the next version of Angular that is supposed to bring us some of the fascinating features like Ivy-based language service and angular 11 support of Nrwl NX, which should not take long.
Read More: All About the latest Angular version 12 release!
This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.
