Angular version 10 is here check out the new features, notable changes, deprecations and removals

AngularVersion10is
Here:Checkoutthe
NewFeatures,Notable
Changes,Deprecations
andRemovals
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.

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.
TypeScript v3.9 Support

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.
TSLib v2.0 and TSLint v6

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"
}
]
}

The browser configuration has been
introduced to eliminate older and less-
updated 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.

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

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.

Angular Material UI now officially includes
To make use of the new date range picker,
use the mat-date-range-input and mat-
date-range-picker components.
Please refer to the official documents to
find out more.
New Date Range Picker

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.
Optional Stricter Settings

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

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
The Strict flag does the listed
below things,

Here you need to make sure that you have a post-
install 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.
NGCC

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.
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",
"fesm5": "fesm5/abp-ng.core.js",
...
}

After:
{
...
"main": "bundles/abp-ng.core.umd.js",
"module": "fesm2015/abp-ng.core.js",
"es2015": "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.

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.
How to update to version 10?

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. Google-
developed framework v10 has not earth-
shattering release, but the features and
breaking changes it has brought can’t be
even ignored.
Suggestion:

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.
Wrapping Up

Angular version 10 is here check out the new features, notable changes, deprecations and removals

More Related Content

What's hot (20)

Similar to Angular version 10 is here check out the new features, notable changes, deprecations and removals (20)

More from Katy Slemon (20)

Recently uploaded (20)

Angular version 10 is here check out the new features, notable changes, deprecations and removals