Table of Contents

“firstly, lemme thank angular team, for their seamless efforts in bringing soo many functionalities to make ui-developer’s life easy. For each and every release they are growing stronger and becoming better.“

The version v10 has been published and announced by this blog post. Although it may not appear as impactful as v9 (with Ivy and all), this release displays Angular team’s commitment to keep Angular up-to-date and relevant. I found this very exciting.

Today, in this blog we will learn what are the new features that are introduced in Angular 10. So, I jumped into the details of what changed and how to migrate. Here is what we found.

Pre-requisite:
patience

MAJOR CHANGES

  1. New Date Range Picker
  2. Optional Stricter Settings
  3. Warnings about CommonJS imports
  4. Deprecations and Removals
  5. New Default Browser Configuration

As you go through the blog, their will be lot of theory in this blog,.. soo i request you all to be patient enough to go through the updates.

  1. NEW DATE RANGE PICKER

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

See this example on StackBlitz.
Learn more about date range selection.

2. OPTIONAL STRICT MODE
We all know how much time will be saved by using strict mode,.. All the extra spaces a line and syntactic errors  are displayed right away so that we need not wait until the code has been complied .
You can opt for strict mode just by entering 3 magical words ❤
ng new --strict
USES OF ENABLING 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

4. Warnings about COMMONJS IMPORTS
Starting with version 10, we now warn you when your build pulls in one of these bundles. If you’ve started seeing these warnings for your dependencies, let your dependency know that you’d prefer an ECMAScript module (ESM) bundle.

Keeping Up to Date with the Ecosystem
a Typescript 3.9 : Angular 9 was released with TypeScript 3.7 support. Soon TypeScript 3.8 was released and Angular v9.1 supported it. Not long after, another TypeScript version, 3.9, is released and Angular responds with v10, keeping up.

b TSLib 2.9 : TSlib is updated to version 2.0. The runtime library for TypeScript contains helper functions that have now been updated to TSlib 2.0.

c TSLint v6 :  The extensible static tool that checks TypeScript code for readability and functionality errors if any. Modern editors support it and build unique systems that can be customized with their own lint configurations, rules, and formatters.
Starting with version 10 you will see a new tsconfig.base.json. This additional tsconfig.json file better supports the way that IDEs and build tooling resolve type and package configurations.

You can take a break and come back, coz there are few more things to discuss.

4. DEPRICIATIONS AND REMOVALS
The Angular Package Format no longer includes ESM5 or FESM5 bundles, saving you 119MB of download and install time when running yarn or npm install

ModuleWithProviders Without a Generic Type [removed]
Earlier versions of Angular was able to compile static method returns with ModuleWithProviders type without the generic type, i.e. ModuleWithProviders<SomeModule>, because the generated metadata.json files would have the information required for compilation.

BEFORE

AFTER

5. BROWSERS DEFAULT LIST
Angular supports most recent browsers, And it gets the information from the configuration available from a file browserlistrc

Angular generates bundles based on the Browser list 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.

In this updated version, the older and less used browsers are now excluded. You can see the differences of by default supporting browsers clearly by comparing the Angular version 9 and Angular version 10.

You can get the Details by using the command
npx browserslist

here we come to the end of another Blog , As I said we need little bit of patience to digest this theory but,,,,,, I feel as developer we need to learn  

Breaking Changes:
* Resolvers that return EMPTY will cancel navigation. In order to allow the router to continue navigating to the route, emit some value such as of(null).

* Reactive forms had a bug which caused valueChanges for controls bound to input fields with number type to fire twice. The listened evet is changed from “change” to “input” to fix this.

* minLength and maxLength validators validate only if the value has a numeric length property.

Finally

And literally hope you coding like the above meme and be happy.

The more you LEARN , The more you GROW   -SARVANI HARSHITA