Before updating

Angular Update Guide recommends specific steps to follow under the Before Updating section, as shown:

Angular Update Guide - Before updating

There can be several kinds of updates you may need to make to your code before attempting an update.

Namespace Changes: The first item on the preceding list is notifying us that the namespaces of certain animation services and tools may have changes. Such changes should be low risk and accomplished quickly with the use of the Global search tool in VS Code. Let's see how you can quickly observe all usages of '@angular/core' in your app. Look at the next screenshot:

Search Results for '@angular/core'

In this case, there is no usage that is related to animations, so we can move on.

Rename and Replace Updates: In version 4, there was a requirement to replace the OpaqueTokens type with InjectionTokens. For these types of changes, once again, use the Global Search tool to find and replace the necessary codes.

When using the Global Search tool find and replace code, ensure that you enable Match Case, signified by Aa and Match Whole Word, signified by Ab|, to prevent unintended replacements. Take a look at the following screenshot for a look at the two options in their enabled state:

Match Case and Match Whole Word Enabled

Functional Changes: Deprecated features, signaled one major version ahead of time, require rewrites of the affected portions of your application code. If you have been heavily using HttpModule and Http, your code will require a serious overhaul:

  1. First, discover the instances of actual usage with Global search.
  1. On angular.iosearch for the newly introduced service, in this case, HttpClient or HttpClientModule:
Angular.io Documentation Page
  1. Click on the relevant link under the Guide heading, which contain rich and contextual information about the new service.
The new service usually comes along with new benefits, such as an improved coding experience, better testability, or performance.
  1. Reimplement the necessary code.
  2. Execute the Post Update Checklist mentioned in the next section.

Such functional changes can simultaneously be great productivity boosters but also greatly increase the friction of a timely upgrade to a new version of Angular. You can, however, lower the cost of change and reap maximum benefits of these changes by preparing ahead of time.

In this case, the LocalCast Weather app doesn't use the deprecated modules, because by chance the development of the app began right after the release of the HttpClient service. However, I wouldn't have known about the change if I wasn't keeping tabs on the Angular community. I highly recommend following https://blog.angular.io for this reason.

In addition, you can check the Angular Update tool regularly. The tool likely won't be updated quickly; however, it is a good summary resource of all upcoming changes.

In the Update tool, if you select a future version of Angular, you will get a warning message:

Warning: Plans for releases after the current major release are not finalized and may change. These recommendations are based on scheduled deprecations.

This is a great way to stay ahead of the game and plan your resources around Angular updates ahead of time.

Once you're done with the Before Updating phase, consider going through the Post Update Checklist before moving on to the next phase.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.23.147