Angular Version 10 with New Features is Now Available

Tags: angular, angular10
Published: 2020-11-02 10:07:11

One of the major releases of Angular that spans the entire platform including Angular Material framework as well as the CLI is Version 10.0.0 of Angular. This release can be said as smaller than the typical but after the release of Angular 9, it is only 4 months that Angular 10 has been released. 
We saw that at least 2 major versions are releasing every year to keep Angular synchronized with the rest of the JavaScript ecosystem and to have a predictable schedule. So, it is always suggested to go for an 
<a href="https://www.dotnettricks.com/training/masters-program/angular">Angular online course training</a>
 session to keep you updated.

What is new in this Angular 10 Release?

New date Range Picker:

Angular Material in Version 10 now includes a new date range picker.
To avail the new date range picker, what you can do is that you can use the mat-date-range-picker and mat-date-range-input components.
Optional Stricter Settings:

Version 10 offers a stricter project setup while you will create a new workspace with ng new.
Ng new –strict
By enabling this flag, it will initialize your new project with some new settings that can improve the maintainability and help you to catch bugs ahead of time and allow the CLI to perform advanced optimizations on the map. Mainly the ‘strict’

the flag will o the following activities:

Turns template type checking to Strict
Enables strict mode in TypeScript
75% have been decreased from Default bundle budgets 
You can configure your app as side-effect free so that it could get more advanced tree shaking
Configures the linting rules to avoid any declarations of type

Get Warnings on CommonJS imports:

While using a dependency that is packaged with CommonJS, it can be providing you as a result in larger yet slower applications. 
Now, start with the latest version 10, you will get a warning message when you build pills in one of these bundles. If you have already observed such kind of warning for your dependencies, you also need to let your dependency know that you would prefer an ECMAScript module (ESM) bundle.  

Keeping Updated with the Ecosystem:

Some new updates have been made to the dependencies of Angular to stay synchronized with the JavaScript ecosystem. 
TSLib has been updated to v2.0
TypeScript bumped to TypeScript 3.9
TSLint has been updated to v6
You will also found that project layout has also been updated in version 10. With this version 10, you will see a new tsconfig.base.json. This additional tsconfig.json file can support the way in which IdEs and build tooling resolve type and package configurations. 
Angular Team Fixit: 
Angular team has already increased its investment in working with the community. Even, from the last few weeks, open issues count has been decreased by over 700 issues throughout the tooling, framework and components.
New default Browser Configuration:
We have updated the browser configuration for new projects to remove the older and less used browsers.
V9 defaults:
[Thomas@Jefferson v9-test]$ npx browserslist
and_chr 81
and_ff 68
and_qq 10.4
and_us 12.12
android 81
baidu 7.12
chrome 80
chrome 81
chrome 83
edge 18
edge 81
edge 83
firefox 68
firefox 75
firefox 76
ios_saf 12.2-12.4
ios_saf 13.3
ios_saf 13.4 – 13.5
kaios 2.5
op_mob 46
op_mini all
opera 67
opera 68
safari 13
safari 13.1
Samsung 10.1
Samsung 11.1 – 11.2


v10 defaults:
[Thomas@Jefferson latest –test]$ npx browserslist
Chrome 83
edge 81
edge 83
firefox 68
firefox 76
ios_saf 12.0 – 12.1
ios_saf 12.2. – 12.4
ios_saf 13.0 – 13.1
ios_saf 13.2
ios_saf 13.3
ios_saf 13.4 -13.5
safari 12
safari 12.1
safari 13
safari 13.1
So, we can see that it has the side effects of disabling ES5 builds by default for new projects. To enable theES5 builds and differential loading for browsers that need it including IE or UC Browser, you just simply need to add the browsers that you support in the .browserslistrc file.
Deprecations and Removals: 
Angular Team has already made several new deprecations and removals from Angular. 

The Angular Package Format is now no longer include FESM5 and ESM5 bundles that will ultimately save you 119MB of download and install time while running yarn or npm install for Angular libraries and packages. 

So, with this high demand for Angular, the developer can take 
<a href="https://www.dotnettricks.com/training/hyderabad/angular-online-training-hyderabad">Angular JS Training in Hyderabad</a>
 or any other places of India and the world to gain in-depth knowledge in Angular 10 as well as other versions of Angular.