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.

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' [email protected] rxjs@'^5.5.2'

npm install [email protected] --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' [email protected] 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.