Angular Version 10 is Here: Check out the New Features, Notable Changes, Deprecations and Removals.

Angular Version 10 is Here: Check out the New Features, Notable Changes, Deprecations and Removals

www.bacancytechnology.com

On 24th June 2020, Angular introduced the latest version – Angular 10.0.0. This is the latest release, but the team has mostly focused on the ecosystem and quality tools, instead of introducing new features Four months back in February, the community has paved its way for the newer version. Ever since the Angular IVY was introduced, the community was keeping close tabs on the frequent updates. Angular 9.1 was introduced in April with some minor updates, including Support for TypeScript 3.8, bug fixes, and performance improvements.

Just like every other Angular developer, I found this update very exciting and followed the news to find out what Angular 10 has bought for all of us. I checkout numbers of articles, but to my surprise, they have mostly focused on quick highlights, so I thought of writing a comprehensive blog post explaining what’s new in Angular 10.

Let’s get started.

Major Changes

TypeScript v3.9 Support Angular 9 was introduced with TypeScript 3.7 support. Later, TypeScript introduced 3.8, so to offer hassle-free Support Angular released v9.1. Angular’s team has always ensured to keep the framework up-to-date and relevant, so to respond to the latest version of TypeScript 3.9, Angular introduced v10 along with introducing TSLib and TSLint.

The faster Angular builds, TypeScript fixes, and updated features are available for Angular developers. Angular programmers will have access to the more intricate TypeScript configuration. TypeScript has stopped offering Support to the earlier versions, so you will be required to install v3.9 in your project.

TSLib v2.0 and TSLint v6 TSLib – The runtime library for TypeScript comprising all the TypeScript helper functions, has been updated to TSlib 2.0.

TSLint – The static analysis tool for TypeScript has been updated to TSLint 6.The Angular team has updated the project layout with v10. We will have a tsconfig.base.json and additional tsconfig.json for package configuration and support IDEs.

Before: { "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.spec.json" }, { "path": "./e2e/tsconfig.json" } ] }

After: "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.spec.json" }, { "path": "./e2e/tsconfig.json" }, { "path": "./projects/core/tsconfig.lib.json" }, { "path": "./projects/core/tsconfig.spec.json" } ] }

Default Browser Configuration

The browser configuration has been introduced to eliminate older and lessupdated bowsers. Internet Explorer 9, IE 10, and IE mobile will not get any official support from now onwards. Microsoft has also stopped offering Support for these browsers. Check out the updated supportive Browser list file here.

Before:

After::

v10 Defaults

Executing the following code will also get you the list of supported web browsers. npx browsers list To find out more on this go through this link

Warnings for CommonJS Imports

There are chances that Angular application may become slower when we import dependencies, which are packaged with CommonJS. CommonJS module is introduced to structure and organize your JavaScript code that is heavily influenced by Node’s module management. Read more about CommonJS here.

From Angular V10, developers will be notified with a warning when dependency packaged could result in a slower and larger application. ECMAScript module bundle is available as a substitute.

New Date Range Picker Angular Material UI now officially includes

To make use of the new date range picker, use the mat-date-range-input and matdate-range-picker components.

Please refer to the official documents to find out more.

Optional Stricter Settings

To improve the maintainability, catch bugs and allow CLI to do advanced optimizations, you can enable the flag initializes with ng new, via ng new –strict from the optional stricter settings.

{ ... "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ] ... }

The Strict flag does the listed below things, Default bundle budgets are reduced by ~75% Enable strict mode in TypeScript Turns template type checking to Strict Configure lint to suppress warnings to prevent declarations of type any Enable more advanced tree-shaking to configure your app as a side-effect

NGCC Here you need to make sure that you have a postinstall script in your “package.json” file to execute NGCC after an installation: { "scripts": { "postinstall": "ngcc" } } With this release, NGCC is more robust. Earlier it wasn’t capable if recovery worker processes get crashed; however, issues with NGCC handing can now be fixed. Significant performance enhancements have been made to NGCC.

Bazel Unfortunately, Angular Bazel has left Angular labs, and it won’t be the default tool in Angular CLI. So you won’t get any official support, and if you are wondering about the reasons why the Angular team has discontinued it, then check them out here.

However Angular team has referred Monorepo if you are interested in building Angular with Bazel.

Changes in Package Format Changes and esm5/fesm5 Angular’s new package format does not include esm5 and fesm5. The default language level consumed by Angular tooling is the reason behind these mandatory changes.

Before:

{ ... "main": "bundles/abp-ng.core.umd.js", "module": "fesm5/abp-ng.core.js", "es2015": "fesm2015/abp-ng.core.js", "esm5": "esm5/abp-ng.core.js", "esm2015": "esm2015/abp-ng.core.js", "fesm5": "fesm5/abp-ng.core.js", "fesm2015": "fesm2015/abp-ng.core.js", ... }

After: { ... "main": "bundles/abp-ng.core.umd.js", "module": "fesm2015/abp-ng.core.js", "es2015": "fesm2015/abp-ng.core.js", "esm2015": "esm2015/abp-ng.core.js", "fesm2015": "fesm2015/abp-ng.core.js", ... }

If your existing applications depend on esm5/fesm5, don’t worry; the system still accepts them. Understand it in a similar way; if your Angular library does not ship to esm2015 or fesm2015, then still you don’t worry because you know that CLI will take care of it. In favor of build speed and bundle optimization, it is suggested to deliver ES2015 outputs.

Browse list Usually, Angular generates bundles based on the Browserlist configuration suggested in the root app folder. Angular v10 will search for .browserlistrc in your application; if they don’t find it in the browser list, then ng update command will help you with the file rename.

Some Notable Changes: Resolvers that return will cancel the navigation. So to continue the navigation to route, you will be required to add some value defaultIfEmpty(…), of(…)

Service worker implementations with Vary headers will not work similarly.

They will simply be ignored. So it is advisable to avoid caching such resources as they can have unpredictable behavior depending on the user agents.

Because of this, cache match options are now be configured in NGSW’s config file Unknown property bindings in templates or similar elements have been increased “error” levels; earlier, it was a warning. formatDate() and DatePipe format codes have been changed, as the previous behavior was not correct for the day span.

MinLength, as well as maxLength validators, will only authenticate the value if there’s a numeric length property.

Angular has stopped sanitizing the style property bindings because of the drop of Support for IE6 and IE7 and the performance cost.

Transplanted views had change detection issues.; however, the issue is fixed now.

How to update to version 10?

Here’s a complete Angular 9 to Angular 10 update guideline. ng update @angular/cli @angular/core If you are upgrading manually using the protractor, then it is advisable to update protractor to 7.0.0+ as pervious introduced versions had vulnerabilities.

Suggestion: It is advisable to update to the one significant version once at a time. If you are currently using Angular v8 and want to upgrade to Angular v10, then instead of upgrading from Angular v8 to 10, first upgrade from v8 to v9 and then v9 to v10.

I have tried to cover all the possible new features, removals, notable changes, and deprecations of Angular v10. Googledeveloped framework v10 has not earthshattering release, but the features and breaking changes it has brought can’t be even ignored.

Wrapping Up If you are looking for well-versed Angular developers who can help you upgrade your existing application with minimum disruption, then get in touch with us today.

Our Angular developers have successfully performed many upgrades for numbers of our clients to take their existing application from an out-of-date to an up-to-date tech stack with a cost-effective approach. Hire Angular developers from us to leverage our Angular upgrade service.

We are a globally renowned AngularJS development company that can help you perform routine maintenance, patch security vulnerabilities, and implement the latest features. You have landed on the right page. We will stay one step ahead of your competitors.

Thank You