Angular Deprecations — The Maze

Developers need to focus on deprecations for the version updates to be magical.

Aneesh Mani
Oct 13 · 3 min read
People inside a maze
People inside a maze
Photo by Susan Yin on Unsplash

Software version upgrade — Something that every developer looks forward too. They may be stuck with outdated software or lack of features that they have painstakingly written the workaround for, or may even be a status thing for some to be on the latest version. ( Trust me, these folks do exist ).

Below is an extract from Angular’s Deprecation’s page.

Let’s take a look at some of the deprecations mentioned here. These might enable easy version update or the code to be in sync with the standards so that, when we update the code for a version upgrade, it seems seamless.

CurrencyPipe:

This is the most common one among them all. The default currency code ‘USD’ has been deprecated in V9 to enable the local currency code to be picked up.

ViewEncapsulation:

The encapsulation option in the component decorator usually picks one of the below values.

/deep/, >>>, and ::ng-deep

Whenever we setup components, Angular helps ensure that component styles don’t overlap. We can use /deep/, >>>, and ::ng-deep to override deeply nested styles with our own. But, be careful while doing this. There might be instances where this can act as a universal override, and we might not want that.

ngModel with reactive forms

We would have all seen this. This is one confusing piece of code. It is always better to code as part of a reactive form or a template-driven form.

We can now choose to show/hide the warnings from this usage by setting the config option while importing ReactiveFormsModule

ActivatedRoute

We use ActivatedRoute and ActivatedRouteSnapshot to get current route information.

The params and queryParams properties have been deprecated in favour of paramMap and queryParamMap, respectively.

Lazy Loaded Modules

When an application uses Lazy loaded module, we set up the references in our router like

The new way of loading modules follows the dynamic module imports syntax.

@ViewChild and @ContentChild queries

We all use this in our applications to get a reference to elements or directives. The explanation for the change can be found here ( I recommend reading the entire thing). In short, below is the change needed

These are only some of the deprecations to get some of us started. We can always refer back to the deprecations guide/update guide. There are some deprecated features which get addressed when running the ng update command. It is always best to ensure all deprecations are addressed in our code in order to travel the migration path easily.

Happy Migration!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Aneesh Mani

Written by

Love life. Web Developer. Love to read, write, code .. Loop. Love Leadership, Management, Product Design. https://www.linkedin.com/in/aneesh-mani/

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Aneesh Mani

Written by

Love life. Web Developer. Love to read, write, code .. Loop. Love Leadership, Management, Product Design. https://www.linkedin.com/in/aneesh-mani/

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store