"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.
- New Date Range Picker
- Optional Stricter Settings
- Warnings about CommonJS imports
- Deprecations and Removals
- 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.
- NEW DATE RANGE PICKER
To use the new date range picker, you can use the
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
- 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
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.
5. BROWSERS DEFAULT LIST
Angular supports most recent browsers, And it gets the information from the configuration available from a file
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
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
* Resolvers that return
EMPTY will cancel navigation. In order to allow the router to continue navigating to the route, emit some value such as
* 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.
maxLength validators validate only if the value has a numeric
And literally hope you coding like the above meme and be happy.
The more you LEARN , The more you GROW -SARVANI HARSHITA