Angular team has released Angular version 10.0.0 on the 24th of June 2020. This is the Major Release that affects the entire Angular platform including Command-line Interface (CLI), Angular Material, and complete framework. It took the Angular team only 4 Months to release Angular 10. This version is mainly focused on tools and ecosystems.
So before we discuss Angular 10 features, let just first understand how to install Angular 10. You can check here the best Angular Templates developed by WrapPixel.
Features of Angular 10.
New Date Range Picker.
The Date Range Picker is a mobile-friendly component that helps the user to select the start date and end date from the calendar pop-up.
This new date picker allows users to select dates either from the calendar or through input text.
To use this new Date Range Picker. You can use it.
mat-date-range-picker or mat-date-range-input components.
The mat-date-range-picker component enables the pop-up panel for date selection. This allows the user to select multiple dates.
Warning About Using CommonJS Imports.
If you want to optimize your applications, then avoid using commonJS module.
According to this new feature now Angular will warn you when you use commonJS modules.
When you start seeing these warnings then use ECMAScript Modules syntax in your application.
The language service compiler enables multiple files by using the project interface. Auto-completion has also been removed from HTML Entities.
Here are some features of TypeScript 3.9
- TSlib, the runtime library for TypeScript has now been updated to TSlib 2.0.
- With Angular 10 TypeScript automatically detects the types of imports that are used to keep files style clean.
- Problem with functions like ‘promise.all’ and ‘promise.race’ have been fixed.
- With TypeScript 3.9 you can add missing return statements quickly.
- In TypeScript 3.9 “}” and “>” are now considered as an invalid JSX Text character.
Optional Stricter Settings.
Angular 10 offer stricter project set-up when you create a new workspace with ng new –strict.
When you enable the flag this initializes your project with a new setting, that helps you catch bugs ahead of time and allow the CLI to perform advanced optimization.
Work of flag (strict)
- Turns templates type checking too strict.
- Enable Strict mode in TypeScript.
- Configures your app as side-effect free to enable more advanced tree-shaking.
- The default bundle budget has been reduced by 75%.
- Configures linting rules to prevent the declaration of type any.
New Default Browser Configuration.
Angular team has updated browser configuration to exclude older and less used browsers. This update has the side effect of disabling ES5 builds by default for new projects. Users have to add browsers in the (.browserlistrc) file to enable ES5 builds and different loading for browser.
New Compiler Update.
In Angular 10 a compiler interface has been updated. To wrap the actual NGTCS Compiler. This update manages to files for type-check with the use of the project interface.
In the latest version of Angular, a huge number of bugs have been fixed. this includes to the avoid of the unidentified instances of the array in the compiler, the “Teaser inlining bug”, and the error caused due to migration when the symbol does not exist is also fixed.
And the framework also helps to identify the modules that get affected due to the overrides occurring in the TestBed.
Multiple Transition File.
In Angular 10 we can easily combine multiple files in a single go. With the previous version, it wasn’t possible to combine multiple files in a single go.
Entry Point Finder.
Entry Point finder is the program base module it is used to find entry point which is added or included in the program mention by the tsjconfig.json file.
The Process to Install Angular 10.
To Install angular 10 by using the Node Package Manager or command-line interface (CLI). Then type the following command in Linux CLI
$ npm install –global @angular/cli@next
Now to install Angular 10 use “next” Tag. When you do that you can install the latest Angular 10.
Or visit https://update.angular.io/ for detailed information and guidance.