How to Upgrade Angular 4 to Angular 5 Apps

This blog represents steps required to upgrade or update or migrate existing Angular 4 apps to Angular 5 apps. Greater details can be found on Angular 5 announcement blog. I must tell you that upgrading from angular 4 to angular 5 is not like the one represented below (from AngularJS to Angular 2.* and later versions).

Figure 1. Upgrading from angular 4 to angular 5 is not like going upside down 🙂

In this post, you will learn about some of the following:

  • Preparation for upgrading from Angular 4 to Angular 5
  • Running the upgrade activity
  • Post-upgrade activities
  • Testing the Angular 5 App



Upgrade/Update Preparation from Angular 4 to Angular 5 Apps

The following are some of the activities which are recommended before the update/upgrade is done:

  • Rename the template tags to ng-template tag
  • Update package.json file appropriately to update dependencies and devDependencies

Update Package.json file for Dependencies/DevDependencies

It is important to update package.json file for upgrading angular apps using Angular 4 to use Angular 5 modules. Once updated, later section discusses how to install latest modules.

Here is how sample and relevant code snippet of package.json of Angular 4 app looks like:

"dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }

Pay attention to the changes which needed to be made:

  • Update dependencies versions
    • Angular modules version 4.* needs to be changed to ^5.0.0 or ^5.x.x (based upon whatever is relevant)
    • Update versions of rxjs to ^5.5.2
  • Update devDependencies versions
    • @angular/cli (^1.5.0)
    • @angular/compiler-cli (^5.0.0)
    • @angular/language-service (^5.0.0)
    • codelyzer (~3.2.0)
    • tslint (~5.7.0)
    • typescript (~2.4.2)

After making the above changes, this is how the code snippet should look like:

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^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/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2",    
  }

Run Upgrade/Update: Run NPM Install

Perform following steps to reinstall the angular and related modules:

  • Remove node_modules folder
  • Execute following command to reinstall node modules
    npm install
    



Post Update/Upgrade Activities

The following are some of the activities which can be done post update/upgrade:

  • Switch from Http Service to HttpClient Service
  • Usage of rxjs/operators import

Switch from Http Service to HttpClient Service

It is recommended to switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. In version 4.3, HttpClient was shipped as part of @angular/common module. This saw a lot of adoption in Angular developers. Thus, Angular is promoting HttpClient and decided to deprecate Angular Http service which was part of HttpModule.

In order to update to HttpClient, all that is required to be done are some of the following:

  • Replace HttpModule with HttpClientModule from @angular/common/http in each of the modules,
  • Inject the HttpClient service
  • Remove any map(res => res.json()) calls

Usage of rxjs/operators import

For each RxJS operator you import, use import from ‘rxjs/operators’ and use the pipe operator.

Start Angular 5 App

  • Start the app using command such as npm start, ng serve or ng serve –open. And, you should be able to access your app.

While starting the app, you may run through following error:

Cannot find module ‘webpack/lib/node/NodeTemplatePlugin’

Following could be done to get away with the above error:

npm remove webpack -g
npm i webpack --save-dev

Feel free to check this angular apps migration page by Google. In case you are developing web apps using Spring and Angular, check out my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

1 month ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

1 month ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

2 months ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

2 months ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

2 months ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

2 months ago