How to upgrade your Angular 4 App to Angular 5.0

| By Maina Wycliffe | | | Angular

Subscribe for more content from me

Angular 5 was finally released earlier this week after several delays. It brings a lot of improvements over Angular 4 and new features as discussed in my previous post here. On top of Angular 5, Angular CLI v1.5 was also released. So, today I will show you how to upgrade your angular 4 app to Angular 5. Before you can get started with this process, it is important that you backup your app. Also, I would advise you to create an upgrade branch on git instead of working on your master or dev app. This will help you have a working app just in case the upgrade doesn’t work.

Upgrade Angular CLI to version 1.5

First and foremost, we need an up to date Angular CLI to take advantages of Angular 5 build optimizer among other features. If you are not using angular CLI, you can skip this step. I am assuming you have installed Angular CLI globally and as such you need to upgrade the global version. If you are using NPM, you need to use the sequence of the commands below:

npm uninstall -g angular-cli

npm cache clean npm install -g @angular/cli@latest

The first command will uninstall Angular CLI globally, while the second command will clear the cache. The last command will install the latest version of Angular CLI. For those using Yarn Packager Manager, follow the following command

yarn global upgrade @angular/cli@latest

To confirm that your Angular CLI has been updated to the latest version (v1.5), use the following command.

ng -v

This will show you the current version of Angular CLI as indicated in the image below.

How to upgrade your Angular 4 App to Angular 5.0

Upgrade Your Angular 4 App

Preliminary Steps

First, run through the checklist below and modify your app accordingly. Do this to avoid breaking your app after you upgrade (Please note, If you started with Angular 4 you might not have to change anything here):

  1. Stop using DefaultIterableDiffer, KeyValueDiffers#factories, or IterableDiffers#factories
  2. Rename your template tags to ng-template
  3. Replace OpaqueTokens with InjectionTokens.
  4. If you call DifferFactory.create(…) remove the ChangeDetectorRef argument.
  5. Stop passing any arguments to the constructor for ErrorHandler
  6. If you use ngProbeToken, make sure you import it from @angular/core instead of @angular/platform-browser
  7. If you use TrackByFn, instead use TrackByFunction
  8. If you import any animations services or tools from @angular/core, you should import them from @angular/animations
  9. Replace ngOutletContext with ngTemplateOutletContext.
  10. Replace CollectionChangeRecord with IterableChangeRecord
  11. Anywhere you use Renderer, now use Renderer2
  12. Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don’t need to map to JSON anymore) and now supports typed return values and interceptors. Read more on io
  13. If you use DOCUMENT from @angular/platform-browser, you should start to import this from @angular/common
  14. If you use preserveQueryParams, instead use queryParamsHandling
  15. If you rely on the date, currency, decimal, or percent pipes, in 5 you will see minor changes to the format. For apps using locales other than en-us you will need to import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local).
  16. Do not rely on gendir, instead look at using skipTemplateCodeGen. Read more
  17. If you created a custom form control with min and max input properties, you will need to adapt to the new behavior by renaming them or using the native validators.

How to Update

Now, I believe you are ready to upgrade your app to Angular 5. If you are using NPM, use the commands below to do the upgrade:

npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'
npm install typescript@2.4.2 --save-exact

And if you are using Yarn Package Manager, use the command below:

yarn add @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'

And there you have it, your Angular 4 app has been successfully upgraded. You can run your application to make sure everything is working fine If you have any question, you can contact me through social media on Twitter or on LinkedIn. Thank you.

Angular 5 has been released

Angular 5 was finally released after several delays yesterday, November 1, 2017. It was also accompanied by Angular CLI 1.5. This is a major …

Read More
How to setup Yarn Package Manager for Angular (Updated)

Last week, I briefly touched on Yarn Package Manager in my post about 5 must have tools for angular developer. Yarn Package Manager – simply …

Read More
How to use Angular 4 with Bootstrap 4

Angular and Bootstrap 4 are arguably the best frameworks out there, though will different purposes. Angular was developed by Google as a …

Read More
5 Must Have Tools for Angular Developers

Whether you are a new or an experienced Angular developer there are several useful tools to help make your life much easier. Whether you are …

Read More
What is new in Angular 5

If you are a fan of Angular, there is some good news, Angular 5.0 will be released on 23th October – that’s next week. If you are wondering …

Read More
Switching from AngularJS to Angular 4

It’s been almost two weeks since I decided to switch to Angular 4 for my incomplete project from AngularJS. If you have seriously considered …

Read More