Amazing New Features And Updates Of Angular 10

Amazing new features and updates of Angular 10

Recently, on 24th of June 2020, Angular version 10 has been released with the beta version. This a major release and is mainly focused on the ecosystem and quality tools instead of introducing new features. Angular 10 features new date range picker in the Angular material UI component library and warnings for CommonJS imports. 

If we take a glance at previous version updates, Angular 9.0 came in use on February 6, accompanied on March 25 by Angular 9.1. On May 28, 2019, Angular 8.0 was released. Here we will see the new features of Angular 10. Before we dig into the new features, let us see how to update your version to Angular 10?

How To Update To Version 10?

Use the following command to upgrade the version to angular 10.

ng update @angular/cli @angular/core

New Features Of Angular 10-

Angular 10 New Features

1. Performance-

App Performance is a significant factor for app success and this is what Angular is Known for. With the new Angular 10, we can observe a great improvement in performance as the Type-Checking performance boost is done to the compiler-cli and computation basepath is shifted to lazy-load which allows it to work when needed in TargetedEntryPointFinder.

In previous versions of Angular, basePaths was computed whenever the finder was instantiated, and the resources get wasted when the TargetedEntryPoint had already been pasted.

2. Typescript 3.9, TSLib 2.9 & TSLint v6-

Apart from past versions which supported typescript 3.6, 3.7 and even 3.8, Angular 10 supports typescript 3.9. Typescript is a language built on JavaScript by adding syntax for type declarations and annotations used by the TypeScript compiler to type-check your code. 

This in turn clean readable JavaScript that runs on lots of different runtimes. Typescript helps to save the files with high editing functionality across editors. With TypeScript new version 3.9, the team has worked on performance, polish and stability. 

Apart from error checking, this version powers things like completions, quick fixes and accelerating the compiler and editing experience.

Some exciting features of Typescript 3.9-

  • “>” and “}” are considered as invalid JSX text characters with typescript new version.
  • Typecript’s latest version provides a quick fix solution to include missing return statements in situations where you might forget to return the value from a function at the end of that function.
  • With angular version10 Typescript automatically detects the types of imports that are used to keep any type of files style clean. Any downleveling to support ES5 in this version will be done at the end of the build process.
  • Compilations with ‘Promise.all’ and ‘Promise.race’ functions have been attacked and the 3.7 version has now been fixed.
  • TSlib, the runtime library for TypeScript consists of helper functions, and now updated to TSlib 2.0. Also there is an update on the TSLint static analysis tool for TypeScript to version 6.
  • // @ts-expect-error comments before a code line as a prefix, with a goal that the TypeScript will not report the error. Typescript will show ‘Unused ‘@ts-expect-error‘ directive if there isn’t any error.
  • Angular 10 has deprecated the inclusion of ESM5 or FESM5 bundles that save 119MB of download and install time at the time of running yarn or npm install for Angular packages and libraries. 

3. Localization-

It is one of the best feature of Angular 10. The latest version supports merging of multiple translation documents that can only load one file with the old versions. But with the new version, customers can specify a couple of documents in keeping with locale and translations from each of these documents can be merged together by message ID. Means you have to put the documents so as of most essential first with fallback translations later. 

4. Browser Compatibility-

Version 9 supports many browsers to provide best results and performance. Angular has updated the browser configuration for new projects. Angular updates the browser configuration for new projects to exclude less used and older versions. Let us see the list of new browser compatibility-

Sr. No.BrowserSupported Version
1AndroidX(10.0), Pie(9.0), Oreo(8.0), Nought(7.0)
2iOS2 most recent major versions
3IE11, 10*,9*(“compatibility view” mode not supported)     *deprecated in v10
4Safari2 most recent major versions
5Edge2 most recent major versions
6Firefoxlatest and extended support release(ESR)
7Chromelatest

It has the side effect of disabling ES5 builds by default for new projects. To enable differential loading and ES5 builds for browsers that need it, just add the browsers you need to support in the .browserslistrc file.

5. NGCC Performance-

To improve the ngcc efficiency, quick reporting of stale lock files is now enabled with the latest version. Also, a cached copy of interpreted tsconfig file is kept, that can be reused if tsconfig route is equivalent.

6. Core-

It is an interesting feature of Angular 10. Now, all warnings will be considered as errors. This will not break an app, but it might game up the tools that expect nothing to be logged via console.error. In this new version, Generic is mandatory for ModuleWithProviders so as to work with Ivy compilation and rendering pipeline. It makes sure that if a developer is using View Engine, no build error will be issued. In this case, ngcc can not help and migration may just cover the app code.

7. Async Locker Timeouts-

Timeouts may be programmed to activate Async, it includes support for setting the AsyncLocker retryAttempts and retryDelay options to ngcc.config.js script..

The app test includes a new timeout function, that use the ngcc.config.js for shortening the timeout to avoid the test lasting excessively long.

8. Router-

Now, the CanLoad guard can go back Urltree in angular version 10. A CanLoad guard returning Urltree cancels the cutting-edge navigation and helps to redirect. This match the behavior to the available CanActivate guards that are apparently added. 

This doesn’t influence the preloading. Additionally, any routes with a CanLoad guard won’t be preloaded, and the guards won’t be completed as a part of preloading.

9. Compiler Update-

Propagation of right value period in ExpressionBinding to ParsedProperty of a micro syntax expression, which will spread the period to the prototype ASTs(both VE and Ivy). This advice is for developers also.

10. Bug Fixes-

With the new version, there have been a number of bug fixes. It includes the compiler avoiding undefined expressions in a holey array and core avoiding a migration error while a nonexistent symbol is imported. 

Another bug fix ensures legitimate identification of modules influenced by overrides in TestBed.

Final Words-

These are some of the new features and updates of Angular version 10. If you are a web developer, you must be updated with the latest version and If you’re thinking to develop a software with angular, hire skilled angular developers of solace team who are updated with the latest version. Connect with Solace and get a free quote for angular development. We will be happy to help you.

Related Post