Angular Latest New Features And Updates

Angular 10 New Features And Updates

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

How to Install Angular

If you have not installed Angular previously, 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 project, you have to type the following command.

ng new angular10tutorial

This will create a brand new Angular project.

Angular New Features and Updates

The latest Angular comes up with New Date Range Picker.

Angular Material now includes the new date range picker.

You can use a new date range picker to use 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 prefer an ECMAScript module (ESM) bundle.

When you run a command ng build –prod command, and if you are using CommonJS, it will warn us. Unfortunately, this also has the 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 must 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 IDEs(Webstorm) and build tooling to 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

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

ng new --strict

Enabling this flag to initialize 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 New Features And Updates article.

Leave A Reply

Please enter your comment!
Please enter your name here

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