what is new in angular 10 and how to update to angular 10

Angular 10 is out! What’s new in Angular 10

by

It has only been 4 months since Angular 9.0 was released and Version 10.0.0 of Angular Now available. Angular team is doing excellent work and making Angular framework much better.

Angular 10.0.0 contains the changes in Angular Framework, Angular CLI and Angular Material.

You can read more about the breaking change in Angular 10 from here

What are the new feature in Angular 10

Angular Material Date Range Picker

Angular Material is now includes Date Range Picker. I think it’s most awaited component that most of the application need. Thanks to Angular Team for releasing this awesome component.

If you want your users to select a range of dates, instead of a single date, you can use the mat-date-range-input and mat-date-range-picker components. They work in similarly to the mat-datepicker and the basic datepicker input.

mat-date-range-picker component will look as follows:

Angular Material Date Range Picker Sample

You can read more about Angular Material Date Range Picker for here

Warnings about CommonJS imports that can slow down large applications

When you use a dependency that is packaged with CommonJS, it can result in larger slower applications.

TypeScript v3.9 Support

Angular 10 supports Typescript v3.9.

TypeScript 3.6, 3.7 and 3.8 are no longer supported, please update to TypeScript 3.9.

TSLib has been updated to v2.0
TSLint has been updated to v6

Default Browser Configuration

In Angular 10, Browser configuration is update for new project.

The browser configuration for new project is updated to exclude old and less used browsers.

In case if you want to support old browsers, you need to add browser that you want to support in .browserslistrc file.

Enable Optional Stricter Setting

To improve the maintainability of the project and to catch the bugs ahead of time, Angular CLI provides optional flag to set the strict project setup.

You can provide this optional flag while creating new angular workspace as following:

ng new --strict

Strict mode does the following things:

  • Enables strict mode in TypeScript
  • Turns template type checking to Strict
  • Default bundle budgets have been reduced by ~75%
  • Configures linting rules to prevent declarations of type any
  • Configures your app as side-effect free to enable more advanced tree-shaking

Deprecations and Removals

The Angular Package Format no longer includes ESM5 or FESM5 bundles. It’ll save around 119MB of download and install time when running yarn or npm install for Angular packages and libraries.

Also the support for old browsers IE 9 , 10 and IE mobile are deprecated.

Read more about deprecation from here

How to update Angular 9 to Angular 10.

You can visit Angular update guide to to update any version of angular to Angular 10. It’ll guide you step by step to update to Angular 10.

To have the best update experience, it’s recommended always upgrading one major release at a time.

Run the following command to update angular 9 to angular 10

ng update @angular/cli @angular/core

If you’ve angular material in you project, Run following command as well.

ng update @angular/material

If you’ve other libraries installed in you project. You can run ng update command. It’ll show you list of commands to run to update to Angular 10.

Also Read: