At Agira, Technology Simplified, Innovation Delivered, and Empowering Business is what we are passionate about. We always strive to build solutions that boost your productivity.

Top Angular 10 Features That You Should Harness

  • By Agira Technologies
  • September 1, 2020

With the latest version of Angular 10 on June 24, 2020, with a beta update, one can expect the final release of the newest typescript-based framework version from Google. This is a huge update but this current angular version will concentrate mainly on the ecosystem and tools instead of adding new functionality.

This is a significant version release that is covering the platform inclusive of the Angular Material, the CLI, and the Angular framework. This delivery is lightweight than the usual previous versions. 

Throughout this article, we have provided a clearer view of the characteristic features of Angular 10 and its impact on the front end development using an Angular ecosystem. Let’s unwind what’s in the latest version of Angular 10.

The Top 10 Angular Features

1. New Date Range Picker

With a major update to Angular Material, the Angular User Interface has got breaking new date picker now which is a fantastic improvement and very useful. As you see the below image, the date range aspect has now been applied to Angular Material. You can use the mat-date-range-input and mat-date-range-picker components in Angular Material. 

2. New Default Browser Configurations

Only a list of browsers is supported now by default. The browser setup has been apparently removed certain browsers. Angular 9 had Chrome 80, 81, 83; and a long list of mobile browsers.

Now, Angular version 10 does not support these browsers by default.

3. Language service

The Language-Service-specific compiler allows several files to be tested using the project interface that generates ScriptInfos as required. Autocompletion also tends to have been excluded from HTML instances, such as &, <, etc., in order to protect the in-house key features of Angular LS, which has dubious meaning and performance costs.

4. Warnings about CommonJS imports

When you have a dependency bundled with CommonJS, it will result in more sluggish implementations. 

Angular version 10 warns you when the build pulls in one of these packages. If you have been getting these alerts for your dependencies, let your dependency recognize that you would like an ECMAScript module (ESM) package.

5. JavaScript Ecosystem and Typescript: Keeping updates Up-To-Date

As expected, we’ve made a few changes to Angular’s dependencies to stay compatible with the JavaScript ecosystem. 

With the updated project layout, you’ll see a new tsconfig.base.json starting with version 10. This file effectively supports like build tools to resolve the type and package configurations.

  • TypeScript bumped to TypeScript 3.9
  • TSLib has been updated to v2.0
  • TSLint has been updated to v6

6. Compiler Updates

The compiler interface in Angular 10 wraps the original ngtsc compiler. With an added name span to read the property and call method, the dependency information, ng-content selectors have now been added to the metadata by the Angular Language Service.

7. Stricter settings options

If you need to create a new Angular project, use the new ng syntax. Now, you can add a strict flag to it. As well as the project will have a strict project configuration with a few different settings that will make your project easier to manage, find bugs in advance, and also grant your Angular CLI more functionalities such as access to advanced features on your Angular application. 

8. Deprecations

The previous version supports typescript 3.6, 3.7, and 3.8 while Angular 10 has now 0discontinued the use of ESM5 or FESM5 packs, which saves 119 MB of download and update time whenever yarn or npm runs for Angular packages and libraries. Any downgrading to support ES5 in this version will be performed as a part of the build process.

9. Performance enhancements

To improve the performance of the NGCC compiler, the reporting on the stale locked file is activated.

The improvement in performance is accomplished by limiting the size of the entry point can be seen. Additionally, the caching of dependencies is executed within the manifest entry point and is read from it instead of being computed at any time. Earlier, even if an entry point did not need to be handled, ngcc might be parsing entry point files to compute dependencies. This would take a long time for huge node modules. BasePaths computing has been rendered lazy in order to increase efficiency. Previously,  whenever the finder was instantiated is now only done if it is desired in the TargetedEntryPointFinder.

10. Bug Fixes

Several bug fixes are made, which include the elimination of unaddressed instances of the range in the compiler, and errors created due to migration where the called symbol does not exist. In addition, the “Terser Inlining Issue” was also patched in the latest version of Angular 10. Also, the system tries to analyze the modules that are impacted by the overrides in TestBed.

If you are looking to hire angular developers for your projects, search for a trustworthy and efficient team member to ensure a smoother front end development

If you have a business idea in your mind and searching for a reliable web development company, you are in the right place. Hire the best web developers in the industry from Agira technologies.

Looking for a Tech partner to dominate the digital world?

Agira Technologies

AgiraTech is a technology company whose business services and domain solutions supports global clients who comprise the current world economy. Services we offer : Web development, Mobile App development, Blockchain, IoT and DevOps Consulting