As a radical Angular Development Company, we have been following closely the rapid strides made by Angular in terms of releasing new features with upgraded versions. Angular 11 has been released and the developer community is excited about what could be in store within the mighty new version. 

Just like we are bringing you all the latest with the Angular releases even in our previous articles, we will try to dig deep into the release notes. For the information of all those who were not aware, the Angular team tries to release two major versions in a single year. With Angular 11 the second release, Angular 12 should come early next year. If you want to re-run what the previous version had, check out our article on it. 

Let’s get started

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

Speed improvements

Compared to its previous versions, Angular 11 brings cheers with major speed improvements. The NGCC speed was a pain point but in the new version, it is 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 also have escalated in performance thanks to the upgrade to TypeScript 4.0. TypeScript 4.0 is considered a major milestone in the TypeScript programming language. It has 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 application. Google Fonts and Icon will be converted to inline in index.html when you set the below flag in your angular.json under the build option. It takes place in a default way for both production and configuration. If you want to use this functionality you need to have a robust internet connection in the build process if you are running your build on CI. The new version is best for commercial websites and applications but may not be very beneficial for applications per se. 

The optimization can be disabled by changing the flag to the below snippet

No more backlogs

The Angular backlogs have been a little trouble maker in the past and the team in recent months has been doing much to reduce the size of the Angular backlog. The Angular 11 team has triaged, reviewed the entire backlog, and also resolved heaps of issues that have been hampering its performance. The closure of issues has been impressive with about 341 issues closed in the last month. 

Source-Medium

The issues are still incomplete with about 2.5k open issues and 500 open PRs. 19k issues have been closed which is very impressive.

NG CLI support Hot Module Replacement (HMR)

In the new version, HMR support has been appended to the Angular CLI. This will 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 who are not aware, HMR is a feature that has been supported by Webpack for a long time. Once HMR is enabled, changes to components, templates, and styles are applied instantly to the application which is set for running without the need for a page refresh. If you have filled in a form and made changes to some styles, then it gets automatically applied to the page and the user page or form stays in the current form. This will be applicable for the state of the controllers, scroll position, and other things. It is the most wanted feature and using the command ‘ng serve — hmr’ the HMR can be utilized. 

CDK

  • To dispatch a custom event for testing, the new features allow the system to use the ‘DispatchEvent’ method to test such events. 
  • For ‘TestElement’ there is an option to dispatch the ‘rightClick’ event. This is especially useful in cases where there is a context menu that opens on the right click. The ‘getNativeElement’ is available to work with a harness environment. 
  • ‘manualChangeDetection’ API has also been added to disable auto change detection. It is extremely useful in cases where there is some async code to run before making a call for change detection
  • ‘selectOptions’ API is also available to select options inside a native select in a harness environment.
Source-Angular

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.Better and updated Language service preview

The new version’s Language service provides useful tools to make development with Angular more productive. The present version of the Language version is based on View Engine and the newly updated language service provides a near accurate experience for developers. In this version, the language service will be able to accurately infer generic types in templates in the same manner the TypeScript compiler does. The new update is still in development but we thought it is better to keep 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 faster with TypeScript v4.0.

Webpack 5 support

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

Linting

In the earlier versions of Angular, there was a default implementation for linting (TSLint). And now in 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 use of TSLint and Codelyzer in version 11. This implies that in future versions the default implementation for linting Angular projects will not be available.

Housekeeping

Support has been removed for IE9/IE10 as well as IE mobile. IE11 is the only version of IE which is still supported by Angular. Even the APIs have been deprecated and this is an important development.

The Angular team has also updated the roadmap to keep everyone posted on what the current priorities are. The intentions are to incrementally roll out larger efforts allowing developers to provide feedback in earlier stages. This will help it incorporate the changes until its final release.

Other small but important changes

  • New automated migrations and schematics.
  • Improvement in service 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 need to run the below-given command. 

ng update @angular/cli @angular/core

If you need more information go to the update.angular.io page to find detailed information and guidance on updating. 

For more on Angular development services or if you are looking to hire an Angular developer by accessing our staff augmentation services, or you want to understand these developments better, contact us right away!

Share: