Latest Code Tutorials

Angular 10 New Features And Updates


Angular 10 is now officially available, and it’s getting better and better. I have written a tutorial on how to upgrade to Angular 10. If you don’t know, then please check out.

Angular 10 has the following version of its dependencies.

  1. rxjs 6.5.5
  2. typescript 3.9.5
  3. webpack 4.43.0

This release is smaller than usual; it has only been four months since we released version 9.0 of Angular.

How to Install Angular 10

If you have not installed Angular previously, then you can install the Angular CLI using the following command.

npm install @angular/cli@next -g

This will install the CLI, and now to create a new Angular 10 project, you have to type the following command.

ng new angular10tutorial

This will create a brand new Angular 10 project.

Angular 10 New Features and Updates

Angular 10 comes up with New Date Range Picker.

Angular Material now includes the new date range picker.

To use a new date range picker, you can use a mat-date-range-input and mat-date-range-picker components.

You can see the new Date Range Datepicker example on StackBlitz.

Warnings about CommonJS imports

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

Starting with Angular version 10, the angular engine now warns you when you build pulls in one of these bundles.

If you have started seeing these warnings for your dependencies, let your dependency know that you would prefer an ECMAScript module (ESM) bundle.

When you run a command ng build –prod command, and if you are using CommonJS, then it will warn us. This also has a side effect of disabling ES5 builds by default for new projects.

To enable the ES5 builds and differential loading for the browsers that need it (such as IE or UC Browser), you just have to add the browsers you need to support in the .browserslistrc file.

Keeping Up to Date with the Ecosystem

As usual, the Angular team has made a few updates to the dependencies of Angular to stay synchronized with the JavaScript ecosystem.

  1. Angular now uses TypeScript 3.9, an improved version of TypeScript.
  2. TSLib has been updated to v2.0.
  3. TSLint has been updated to v6.

They have also updated our project layout.

Starting with version 10, you will see the new tsconfig.base.json. This extra tsconfig.json file better supports the way that IDEs(Webstorm) and build tooling resolve type and package configurations.

New Default Browser Configuration

They have updated the browser configuration for new projects to exclude older and less used browsers.

To view the browserslist, type the following code.

npx browserslist
chrome 83
edge 83
edge 81
firefox 77
firefox 68
ios_saf 13.4-13.5
ios_saf 13.3
ios_saf 13.2
ios_saf 13.0-13.1
ios_saf 12.2-12.4
ios_saf 12.0-12.1
safari 13.1
safari 13
safari 12.1
safari 12

Optional Stricter Settings

Angular 10 offers a more strict project setup when you create a new workspace with ng new.

ng new --strict

Enabling this flag to initializes your new project with a few new settings can improve maintainability, help you catch bugs ahead of time, and enable an Angular CLI to perform advanced optimizations on our app. The strict flag does the following:

Deprecations and Removals

The Angular Package Format no longer includes ESM5 or FESM5 bundles, saving you 119MB of download and install time when running the yarn or npm install for Angular packages and libraries.

These formats are no longer needed as any down leveling to support ES5 is done at the end of the build process.

Based on heavy consultation with the community, we are deprecating support for older browsers, including IE 9, 10, and Internet Explorer Mobile.

That is it for this Angular 10 New Features And Updates article.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.