Angular 10 is available and here’s what you should know about it !
on June 24, 2020, Angular team announced that Angular 10 is available and ready for community to use. It’s not that long when Angular 9 was released in Feb 2020. Angular team just took around 4 months to release the next update i.e. Angular v10. Just a smaller release typically.
It’s a major release from Angular team in certain ways, that spans the entire platform, including the framework, Angular Material, and the CLI. This release from Angular Core Team puts more emphasis on quality, tool, and ecosystem improvements than new features.
Angular team at Google is committed to release two major versions each year to keep Angular synchronized with the rest of the JavaScript ecosystem and to have a predictable schedule — one of the reason to love Angular.
What’s new in Angular 10 ?
Warnings for CommonJS Imports
Angular application can ends to be a larger slower application when we use/imports some dependencies that are packaged with CommonJS. Starting from Angular v10, CommonJS import warnings alert developers when a dependency packaged with CommonJS could result in larger, slower applications, allowing developers to substitute an ECMAScript module bundle.
New Date Range Picker
Angular Material UI now includes a new Date Range Picker.
To use the new date range picker, we can use the mat-date-range-input and mat-date-range-picker components.
Learn more about Angular Material Date Picker here.
Optional Stricter Settings
Optional stricter settings offer a more-strict project setup when creating a new workspace with ng new, via ng new --strict. Enabling this flag initializes a new project with new settings to improve maintainability, help catch bugs, and allow the CLI to do advanced optimizations on an app. Specifically, the strict flag does the following:
- 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
TypeScript 3.9
TypeScript 3.9 is now featured, with support for TypeScript 3.8 having been removed. This is a breaking change. TypeScript 3.6 and TypeScript 3.7 also are no longer supported.
Although, Microsoft is also testing/working on TypeScript 4.x.x. We might see it in Angular v11 (still no confirmed news, just an assumption).
TSLib v2.0 and TSLint v6
TSlib, the runtime library for TypeScript containing helper functions, has been updated to TSlib 2.0. The TSLint static analysis tool for TypeScript has been updated to TSLint 6.
Angular Team also updated the project layout a bit. Starting with version 10, we 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. (Source: Angular Blog)
New Default Browser Configuration
The browser configuration for new projects has been updated to exclude older, less-used browsers. Support is deprecated for Internet Explorer 9, Internet Explorer 10, and Internet Explorer Mobile. As Microsoft also removed the support for these browser, so that does make sense to remove them from Angular as well.
This has the side effect of disabling ES5 builds by default for new projects. To enable ES5 builds and differential loading for browsers that require it (such as IE or UC Browser), simply add the browsers you need to support in the .browserslistrc file.
Deprecation and Removals
As mentioned earlier, support for some outdated browsers like IE9, IE10 and IE Mobile browser has been removed.
Moreover, Angular Package Format no longer includes ESM5 or FESM5 bundles, saving download and install time when running yarn or npm install for Angular packages and libraries.
To know more about the deprecation and removals in v10, click here.
How to update your Angular application to v10
Thanks to Angular CLI, it’s very easy to update your Angular Application version. We can use following command to update the Angular to latest version :
ng update @angular/cli @angular/core
Note : It’s recommended to update one major version at a time. Means, let’s suppose you are currently using v8 and want to upgrade to v10. In that case, first you have to upgrade from v8 to v9 and then v9 to v10, not from v8 to v10 directly.
You can even check the exact steps on Angular’s official website to upgrade the version. Just follow the link here.
At last, but not the least, Thanks to Angular Core Team at Google who are working very hard to keep the framework up to date and make life easy for all the Angular Developers out there.
