Upgrading from Angular 4 to 5
- Home
- Engineering Blog
- Upgrading from Angular 4 to 5
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.
Next Post
Exploring Javascript's requestAnimationFrame
Categories: JavaScript
Comments
Disqus Recommendations
We were unable to load Disqus Recommendations. If you are a moderator please see our troubleshooting guide.
❮
- 9 years ago
- 2 comments
Unit testing is a very important part of software development, and it is …
- 9 years ago
- 2 comments
Lazy loading modules in AngularJS is a easy way to improve the user …
- 8 years ago
- 4 comments
An overview and examples of debugging your PHP application with the use of …
- 8 years ago
- 1 comment
Videojs component with Vuejs
- 9 years ago
- 4 comments
Managing Multiple Bootstrap Modals
- 7 years ago
- 3 comments
The future of jQuery
- 8 years ago
- 1 comment
Time to explore the nice file system abstraction from the League called FlySystem. …
- 9 years ago
- 1 comment
In the second part of our NPM & Angular CLI series we discuss how we turned …
❯
Disqus Comments
We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.
What do you think?
0 Responses
Upvote
Funny
Love
Surprised
Angry
Sad
G
Start the discussion…
Comment
Log in with
or sign up with Disqus or pick a name
Disqus is a discussion network
- Don't be a jerk or do anything illegal. Everything is easier that way.
Read full terms and conditions
This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to:
- Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our Terms of Service and Privacy Policy, including supplementing that information with other data about me, such as my browsing and location data.
- Contact me or enable others to contact me by email with offers for goods or services
- Process any sensitive personal information that I submit in a comment. See our Privacy Policy for more information
Acknowledge I am 18 or older
Discussion Favorited!
Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!
Tweet this discussion
- Share this discussion on Facebook
- Share this discussion via email
- Copy link to discussion
Be the first to comment.
live.rezync.com
live.rezync.com is blocked
This page has been blocked by an extension
- Try disabling your extensions.
ERR_BLOCKED_BY_CLIENT
Reload
This page has been blocked by an extension
pippio.com
pippio.com is blocked
This page has been blocked by an extension
- Try disabling your extensions.
ERR_BLOCKED_BY_CLIENT
Reload
This page has been blocked by an extension
See how we can help
Lets talk!
Contact Us
Stay up to date on the latest technologies
Join our mailing list, we promise not to spam.
Email AddressJoin