Angular 10 officially released and deprecates support for Internet Explorer 9 and 10; Read more about the changes

zoltanszogyenyi

Zoltán Szőgyényi

Posted on June 26, 2020

Angular 10 officially released and deprecates support for Internet Explorer 9 and 10; Read more about the changes

If you’ve been using Angular for your web projects I’m glad to let you know that following this major update to version 10.0.0 the front-end framework created by Google officially drops support for Internet Explorer 9, 10 and Internet Explorer Mobile. This comes a few days after Bootstrap 5 also dropped support for all versions of Internet Explorer.

Angular 10 officially released

So here’s shortlist of the most important changes:

  • Dropping support for IE 9, 10 and IE Mobile
  • TSLib updated to version 2, TypeScript to 3.9 and TSLint to v6
  • New Date Range Picker
  • Warnings about CommonJS imports
  • Optional Stricter Settings

Dropping support for IE 9, 10 and IE Mobile

According to the official blog post, the team behind Angular let us know that after a heavy consultation with the community they decided to officially deprecate support for IE 9, 10 and Internet Explorer Mobile. This comes as a welcoming change for the developers especially for those who wasted countless hours to offer support for these old browsers.

You can read the updated guide for deprecations if you’re planning to update to version 10.

TSLib updated to version 2, TypeScript to 3.9 and TSLint to v6

These were some expected updates in order to keep Angular up to date with the Javascript ecosystem. Though following these changes the project layout has also been updated by adding an additional tsconfig.json file to better support IDEs and build tooling resolve type and package configurations.

New Date Range Picker

This is one of the few updates regarding components and layout. Angular Material comes with a brand new date range picker for the datepicker component.

Angular 10 new date range picker demo

Check out the official documentation for the new Angular date range picker.

Warnings about CommonJS imports

This is a welcoming update which helps developers by warning them when a dependency packaged with CommonJS could result in larger and slower applications, allowing them to change an ECMAScript module bundle.

CommonJS Angular 10 Warnings Example

CommonJS is a module formatting system which helps you structure and organize your JavaScript code. It is heavily influenced by NodeJS’s module management. You can read more about CommonJS on the official website.

Optional Stricter Settings

With the version 10 update there’s a new flag that you can use when first initializing your Angular application which will create a more strict project setup:

  `ng new --strict` 

This new strict mode will improve maintainability, assist you in catching bugs and errors ahead of time and enable the CLI to apply additional optimizations to your application. According to the official blog post, here’s the list of the features of the new strict mode:

  • 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

How to update to Angular 10

Fortunately the Angular team provided us with a detailed guide on how you can update your Angular application to the newest version. You can visit update.angular.io to follow the instructions. You can use the following CLI command to update you application:

  `ng update @angular/cli @angular/core` 

You can also read more about updating to Angular version 10 from the official guide.

💖 💪 🙅 🚩
zoltanszogyenyi
Zoltán Szőgyényi

Posted on June 26, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related