Angular 10

Angular 10 is Available Now – Here are the Latest Features and Updates

On 24th June 2020, Angular 10 has been launched but this time, with the beta version. It’s a big release; nevertheless, this most recent angular version will highly focus on the quality tools and ecosystem instead of launching new features.

In case you are a web app developer, who uses Angular for every project, you should be seeking the basic features and value additions of the latest Angular version 10. Let’s take a look at the key features and value offerings of Angular 10!

Features & Updates of Angular 10

1. Warnings on CommonJS Imports

A dependency packed with CommonJS in your projects can affect the speed of app loading and lead to slower functionality. However, with the Angular 10, developers have got warnings regarding using dependencies packed with CommonJS.

2. Optional Stricter Settings

Angular 10 provides a stricter project setup for making a new workspace using ng new.

ng new –strict

After allowing this flag, it starts with the new project using some new settings that enhances maintainability, allows the CLI for performing advanced optimizations on the app, and helps catch bugs properly beforehand. Permitting this flag helps app configuration as side-effect free to make sure more developed tree-shaking.

3. New Date Range Picker

Angular 10 has come with the all-new date range picker. To use it, you can utilize elements of both mat date range picker and mat date range input.

4. Enhanced Community Engagement

Angular features a large global community of developers who constantly provide value offerings for the angular projects throughout the spectrum. The organization along with the launch of Angular 10 also revealed its upcoming strategy of doing a huge investment for including the community to create the platform better.

Due to the constant efforts of including Angular community assistance in providing a better toolset and framework, problem counts could be reduced naturally. The organization will make big investments for more accurate working with the Angular development community.

5. Boost in ngcc Performance

You can see a boost in performance that is accomplished by lowering the entry point’s size. Moreover, hiding of dependencies is implemented inside the entry point exhibit and is read from there as compared to being computed every time.

Earlier although an entry point didn’t require processing, ngcc might analyze the entry point files for computing dependencies, which might take lots of time for large_node modules.

To boost performance, the computation of basePaths has been created lazily. What earlier was done when the finder was instantiated is currently just done in case required in TargetedEntryPointFinder.

6. Async Locking Timeout

Async locking timeout’s configuration is still probable, which may include assistance in the ngcc.config.js file, adjusting the retry delays and retry attempts in the AsyncLocker.

An examination has been combined for monitoring for the timeout, using the ngcc.config.js file to lower the timeout and prevent the more maximized application of the test.

7. Removals and Corrections

The main Angular developer team has executed much deprecation and removed some things from this platform.

For example, FESM5 or ESM5 bundles have been taken out from the Angular Package Format and this lowered the file size by at least 119 MB in case you utilize package managers like npm or Yarn to install Angular.

Moreover, the assistance for some old browsers like Internet Explorer Mobile, Internet Explorer 9, 10 has also been taken out.

8. Compiler Update

A compiler interface has been added in the most recent Angular 10 to cover the actual ngtsc compiler. Angular 10 has also included name spans for method calls and property reads. Alongside this, ng-content selectors, Dependency data, and Angular language service have also been added to the metadata.

It also accepts the procreation of the accurate cost period in the ExpressionBinding of a micro syntax expression to ParsedProperty, which, as a result, might procreate the period to the template ASTs (both Ivy and VE).

9. TSLint v6, TSLib 2.9, and Typescript 3.9

Angular 10 boasts Typescript 3.9. Typescript language creates on JavaScript by including syntax for annotations and type declarations used by Typescript compiler to type-check the developers’ code. As a result, this cleans readable JavaScript that runs on several runtimes.

Typescript helps save files with its great editing performance across editors. Typescript 3.9 helps the team in working on stability, polish and performance. Aside from the error-checking, the latest angular version strengthens things like editing experience, accelerating the compiler, rapid fixes, and completions.

10. Generic with ModuleWithProviders

The utilization of generic keywords has become compulsory with the ModuleWithProviders in Angular 10. This has been added for making the ModuleWithProviders patterns function with the rendering sequence and Ivy compiling.

11. Bug Fixes

In Angular 10, many bug fixes are done, which incorporates the removal of the unaddressed examples of the range in the compiler, and the mistakes made because of migration when the symbol doesn’t exist. Moreover, the Terser Inlining Bug has also been fixed in Angular 10.

12. Combining with Many Transition Files

With the launch of Angular 10 new features, developers can merge many files in just one go. Moreover, this file transaction will be made through messaging functions.

13. Resolver Returns Empty

This feature helps leave navigation. You just require defining a resolver that can return empty. For continuing with the navigation, you have to update the resolvers for some default value.

How to Update to Angular 10

On Github, you can find the general release of Angular 10. For updating the present Angular install, run the following command:

ng update @update/cli @angular/core


In case you are a mobile or web developer, you must update the Angular version. The latest version increases the expectations a little more for the Angular developers for sure.

Paresh Solanki

Paresh Solanki

Paresh Solanki is a Technical Head at Mindinventory. He started his career as PHP developer and have expertise in Node, Linux Administration, Angular, IONIC, React-Native, Laravel, CakePHP, CodeIgniter, Meteor, ReactJS and many other JS frameworks. Currently having his hands on Go Language, Python, RoR and Flutter.

Turn your vision to magnificent reality With
Our Web and Mobile Solutions