3 Easy Steps To Upgrade Your Angular 4 App To Angular 5.0

6

Angular 5 is just released in Oct’2017. It has a lot of new improvements and features discussed in Angular 5 New Features. So, now our next action could be upgrade your Angular 4 app to angular 5.0

Now, after having Angular 5 on the board, most people may want to upgrade their Angular app from version 4 to 5. So, this article will help you to follow the steps that will upgrade your Angular 4 app to Angular 5.0

3 steps to upgrade your Angular 4 app to Angular 5.0

Here, we’ll follow 3 basic steps to upgrade your Angular 4 app to Angular 5.0, the latest version.

These steps contain, upgrade of Angular CLI version, used dependencies modification and the dependencies updation. So, let’s begin.

1. Upgrade Angular CLI version to 1.5

First of all, let’s upgrade the installed Angular CLI to get the benefits of Angular 5 build optimizer feature.

This feature basically makes the bundle size smaller and it helps in the performance of the application mainly.

Here, I am assuming that you’re using Angular CLI. If you’re not using Angular CLI then you can skip this step.

For NPM users

npm uninstall -g @angular/cli
npm cache clean

#if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using –force)

Now, you can upgrade it by using following command.

npm install -g @angular/cli@latest

For Yarn Package Manager

yarn global upgrade @angular/cli@latest

Now, confirm the CLI version. It should be the version 1.5

ng -v

2. Modify Angular 4 app 1. dependencies

The following are the important points that will guide you about the required modifications for your existing application.

Before updating

  • Rename your template tags to ng-template
  • Replace downgradeComponent, downgradeInjectable, UpgradeComponent, and UpgradeModule imported from @angular/upgrade.

During the update

If you rely on the date, currency, decimal, or percent pipes, in 5 you will see minor changes to the format. For applications 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).

After the update

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.

Now, I believe you’re ready to update your app.

Note that these steps are mainly focused to upgrade the basic Angular 4 app to Angular 5.0. If you’ve complex applications with lot of components, then you can use Angular upgrade tool as well.

3. Finally, Update the depedencies

Now, you just need to update the Angular 4 dependencies to Angular 5 by using following command.

For NPM users

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

For Yarn Package Manager

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'

That’s it, you’ve successfully upgraded your Angular 4 app to Angular 5.

Leave a Reply

6 Comments on "3 Easy Steps To Upgrade Your Angular 4 App To Angular 5.0"

avatar
  Subscribe  
newest oldest most voted
Notify of
Aribisala Olabanji
Guest

I also get this in the terminal
Your global Angular CLI version (1.5.4) is greater than your local
version (1.4.9). The local Angular CLI version is used.

To disable this warning use “ng set –global warnings.versionMismatch=false”.

Aribisala Olabanji
Guest

I have been able to resolve it….

I used this command in my terminal npm install –save-dev @angular/cli@latest

Lyon
Guest

Hi, can I check on the nodejs and npm version for installing Angular 5 ?

I’m using Angular 4 app with:
– nodejs: v6.7.0
– npm: v3.10.3