Intro

By the time of this writing, the dev team behind Angular has moved on from supporting version 4.x.x. If you Angular app is currently at 4.x.x., upgrading to 5.x.x and beyond is a must. Having upgraded our long term project from version 4 to the latest version of 5, we have ran into interesting sets of obstacles to overcome.

We are behind curve when it comes to Angular’s latest and greatest. At this point, there are plenty of sources that highlight and explain the technical side of Angular 5’s feature. Therefore, our blog post stays away from the technical details and instead highlight more about our personal experience.

Before upgrading

Before diving in to every unknown we like to begin our exploratory phase we call discovery. We dedicate a small slot of time into the discovery period to determine the issues and the most viable solution available. For the upgrade, we have documented our course of plan by consulting the following:

• https://update.angular.io/
• package.json

https://update.angular.io/ is a nifty tool provided by the Angular dev team to make the upgrading as seamless as possible as it provides a list of changes you need to make in your codebase to be compatible to the next version of Angular.

package.json is used to check if our 3rd party dependencies need to be updated as well. After scouring every packages for the deprecated modules, I studied every change log to see if their newer version is compatible with version 5.

After checking out the two sources and cross referencing our Angular codebase and its dev environment, we document our discovery and send to our client for approval to proceed.

The Good

Unlike our update from Angular 2 to 4, the jump from version 4 to 5 has been relatively painless. With the provided Angular guide, necessary code changes have been made; the major changes are removing the now deprecated HttpModule and Http service to HttpClientModule and HttpClient service, respectively.

Each 3rd party dependency’s changelog have been cross referenced to make sure that its updated version’s change reflects what is mandated by Angular 5. The most notable packages that required upgrading was ngx-bootstrap and ng-recaptcha . Luckily for me and the project, there were no packages that were discontinued beyond Angular 4. Therefore, no time were spent looking for alternatives.

The Bad

Unfortunately, the update list provided by Angular does not cover the specifics. Angular’s update guide of “Replace X with Y” fails to provide detail regarding the configuration of outlying parameters. Extra research is required to nail down the detail because I found Angular’s official documentation to be lacking in specific details.

Example:

`this.router.navigate([”], { preserveQueryParams: true });` is a snippet of code from our Angular 4 project. According to Angular update guide, `preserveQueryParams` is to be replaced by `queryParams` which no longer takes in a boolean value as per official document. However, the document fails to mention which value the new `queryParams` take.

After much outside research, the value it takes is `preserve`.

The final result is:
`this.router.navigate([”], { queryParamsHandling: “preserve” });`

Long story short, the Angular documentation leaves much to be desired in supporting the update tool its development team provides.

The ugly

After making all the changes, and upgrading the Angular to 5, we tested out every http calls the application makes and found 99% of the application working perfectly. However, it seems the Angular team has also made at least one “behind the scene” change that remained unmentioned in the update-list

My remaining 1% stems from a reactive form that involves setting its value dynamically. When making the post request, a JavaScript error was causing a crash citing: `syncPendingControls is not a function`.

After much searching through the code I found that Angular no longer allows mutating the form value directly in the following manner:

` form[‘controls’].value = ‘foo’ `

From version 5, it enforces a setter function to set a value instead:

`form[‘controls’].value.setValue(‘foo’);`

If you are having a similar situation, I recommend checking your form controller and any form validators it may be attached to.

Conclusion

Upgrading Angular from 4 to 5, when planned carefully is a straightforward task.  However, challenges can arise pending the complexities of your application. Possible challenges that can arise is is due to the lack of information in the official documentation as well as unique cases in the update tool. If your application is still in Angular 4, please take the time to upgrade as it is out of Long Term Support. I hope this blog post will help along the way as a case study.