What is New in Angular 10

jayesh shinde
2 min readJun 30, 2020

--

Version 10.0.0 is major release that span the entire platform which includes Material, CLI and framework.

Having 2 major releases within year angular team kept the framework synchronized with latest version of Javascript and Typescript ecosystem.

Major Changes:

  1. TypeScript v3.9 Support

Since 3.9 comes with various performance improvements, Angular 10 is not backward compatible with TypeScript now.

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

2. solution style for tsconfig.json Files

  • Support to tsconfig.json was introduced by TypeScript 3.9.
  • A new file called tsconfig.base.json is introduced, to have tsconfig.json at root.

3. Angular Package Format Changes

  • Angular Package Format now does not include esm5 and fesem5 distributions.

4. Browser List

  • Angular generates bundles based on the Browserlist configuration provided in the root app folder. Angular 10 will look up for a .browserlistrc in your app, but fall back to browserlist if not found. The ng update command will rename the file for you. Default browser support for Baidu, Opera, Samsung, Android Chrome removed.

5. Removed ModuleWithProviders without Generic Type

  • After Ivy, since metadata.json is not required, Angular checks the generic type for type validation.
  • Example

6. UnDecorated Base Classes Removed

  • If you have Angular Decorator or Dependency Injection then we need to decorate the base classes also.
  • Dependency Injection Example

Here Angular 10 will throw error

7. New Data Range Picker

  • Angular Material now have new date range picker constructed from mat-date-range-input and mat-date-range-picker components.

8. Warnings about CommonJS imports

  • Use of CommonJS for dependency manager result in larger slower applications.
  • It is now recommendable to use an ECMAScript module (ESM) bundle for your dependencies

9. Optional Strict Settings

  • Angular 10 now offer more strict project setups at the time of setting up the workspace using ng new --strict.
  • Benefits of strict flags are :
  • Enables strict mode in TypeScript
  • Turns the template type checking to Strict
  • Default bundle budget to be reduced by ~75%
  • Configure linting rules to prevent use of type any

--

--

jayesh shinde
jayesh shinde

Written by jayesh shinde

Full Stack Developer | React| Angular| Swift| Node| AWS

No responses yet