Angular 11 – Everything You Need to Know

Angular version 11 is here and it's brought some great updates for the developers. From the framework to the components and CLI – everything is updated. The Angular team tries to bring some major changes with each update. as an example , iVY was released in Angular 9, support for Typescript 3.8 was provided in Angular 9.1, and modifications within the Angular Material UI component library was put forth in Angular 10. Today, we'll explore the features of Angular 11. Let’s dive in then.

Let’s start

The best part about every new Angular version is that it works on the previous loopholes and shutting its chapter once certain all. Let’s see how it's progressed:

Speed improvements

Compared to its previous versions, Angular 11 brings cheers with major speed improvements. The NGCC speed was a pain point but within the remake , it's much faster almost 2-4x times. Ivy applications are built with libraries that were created with the View Engine compiler. For compatibility, a tool called the Angular Compatibility compiler or NGCC is provided. CLI command runs ngcc when performing an Angular build. The compilation times even have escalated in performance because of the upgrade to TypeScript 4.0. TypeScript 4.0 is taken into account a serious milestone within the TypeScript programing language . it's presently leapfrogged 3.9 and has become its latest stable version.

Font inlining

Angular CLI will now download and inline the fonts which are in use and linked by the appliance . Google Fonts and Icon are going to be converted to inline in index.html once you set the below flag in your angular.json under the build option. It takes place during a default way for both production and configuration. If you would like to use this functionality you would like to possess a strong internet connection within the build process if you're running your repose on CI.

No more backlogs

The Angular backlogs are a touch trouble maker within the past and therefore the team in recent months has been doing much to scale back the dimensions of the Angular backlog. The Angular 11 team has triaged, reviewed the whole backlog, and also resolved tons of issues that are hampering its performance. The closure of issues has been impressive with about 341 issues closed the last month.

NG CLI support Hot Module Replacement (HMR)

In the remake , HMR support has been appended to the Angular CLI. this may make it simpler to enable HMR when initiating an Angular application using :

Once it begins, the console says that the HMR is active. It shows the notice:

“Hot Module Replacement(HMR) is enabled for the dev server”

For those that aren't aware, HMR may be a feature that has been supported by Webpack for an extended time. Once HMR is enabled, changes to components, templates, and designs are applied instantly to the appliance which is about for running without the necessity for a page refresh. If you've got filled during a form and made changes to some styles, then it gets automatically applied to the page and therefore the user page or form stays within the current form. this may be applicable for the state of the controllers, scroll position, and other things. it's the foremost wanted feature and using the command ‘ng serve — hmr’ the HMR are often utilized.

CDK

To dispatch a custom event for testing, the new features allow the system to use the ‘DispatchEvent’ method to check such events.
For ‘TestElement’ there's an choice to dispatch the ‘rightClick’ event. this is often especially useful in cases where there's a context menu that opens on the proper click. The ‘getNativeElement’ is out there to figure with a harness environment.
‘manualChangeDetection’ API has also been added to disable auto change detection. it's extremely useful in cases where there's some async code to run before making a involve change detection
‘selectOptions’ API is additionally available to pick options inside a native select during a harness environment.


Material support and additions

• For stepper control, there is Theming support
• When datepicker changes the view, the ‘viewChanged’ event is available. 
• The ‘MAT_TABS_CONFIG’ will support the ‘dynamicHeight’ property if you are looking at the growth in the size of the tab group similar to the active tab.

The new version’s Language service provides useful tools to form development with Angular more productive. this version of the Language version is predicated on View Engine and therefore the newly updated language service provides a near accurate experience for developers. during this version, the language service are going to be ready to accurately infer generic types in templates within the same manner the TypeScript compiler does. The new update remains in development but we thought it's better to stay you updated.

Better build-up

Angular version 11 will bring faster development and build cycle by making updates to some key arrears. When installing dependencies, the ngcc update process is 2-4 times faster. Even the compilation is quicker with TypeScript v4.0.

Webpack 5 support

Teams can now opt-in to webpack v5. within the present version, you'll experiment with module federation. But within the future, webpack v5 will make the trail precise for rapid building with continuous disk caching. Bundles are smaller with the efforts associated with cjs tree-shaking.

Linting

In the earlier versions of Angular, there was a default implementation for linting (TSLint). And now within the present version, TSLint is deprecated by the project creators who have now recommended migration to ESLint. The open-source community has developed a third-party solution and migration path through typescript-eslint and tslinit to eslint config. The authorities have also deprecated the utilization of TSLint and Codelyzer in version 11. this suggests that in future versions the default implementation for linting Angular projects won't be available.

Housekeeping

Support has been removed for IE9/IE10 also as IE mobile. IE11 is that the only version of IE which remains supported by Angular. Even the APIs are deprecated and this is often a crucial development.

The Angular team has also updated the roadmap to stay everyone posted on what the present priorities are. The intentions are to incrementally roll out larger efforts allowing developers to supply feedback in earlier stages. this may help it incorporate the changes until its final release.

Other small but important changes

New automated migrations and schematics.
Improvement in commission workers
Lazy loading support for named outlets.
Angular CLI can now generate resolve guards.
Stricter types built-in pipes.
The formatDate function will now support the ISO 8601 week-numbering year format.

How to update to the new version?

To update Angular and CLI you would like to run the below-given command.

ng update @angular/cli @angular/core

If you would like more information attend the update.angular.io page to seek out detailed information and guidance on updating.