Angular Version 10 with New Features is Now Available



One of the major releases of Angular that spans the entire platform including Angular Material framework as well as the CLI is the 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 Angular online course training 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’ 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 Update 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 which 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 Angular JS Training in Hyderabad or any other places of India and the world to gain in-depth knowledge in Angular 10 as well as other versions of Angular. 



Post a Comment

Previous Post Next Post