3 Steps to upgrade project from Angular 5 to Angular 6

Introduction

As we all know, Google has just released Angular latest version as Angular 6 with lots of new features. Everyone is willing to learn what new features are and how to create an Angular 6 CLI project.  But this article will neither for latest features of Angular 6 nor how to create Angular 6. We will write separate articles for these topics.  Basically, this article will provide step by step information about how to upgrade your existing Angular 5 CLI project to Angular 6 CLI project. If you have already an Angular application in version 5 and you are willing to upgrade Angular 5 project with latest version 6 to avail of all the new features. Then this article is for you.

PREREQUISITES:

1.  Installed Node.JS version should be 8 or higher than this. Node.JS version can be checked by node -v command from command prompt.
2. If using Angular 2/4 with HttpModule and Http service then convert these with HttpClientModule and HttpClient.

NOTE: Now animation packages are part of @angular/animations

Before going into detail, you have to open CMD (Command Prompt) in Administrator Mode, so that you will not get any access-related problem while executing commands. And follow each step one by one to convert your Angular 5 CLI project to Angular 6 CLI project. So, let’s start.

STEP 1: Update Angular CLI Locally and Globally.

First thing, which you need to update is Angular CLI (Command Line Interface). You must update CLI locally and globally as well. So, for updating Angular CLI globally, you should use the command as follows.

npm install @angular/cli -g

Now, it’s time to update Angular CLI for project-specific, It means locally. So, move to your current project folder and update angular/cli locally using the following command.

npm install @angular/cli

Now update your @angular/cli with command as follows

ng  update @angular/cli

If it will run successfully then good for you and you can move to step 2. But probably, you will get the error as follows.

Error: self signed certificate in certificate chain

There are different solutions available on the Internet but few of them will work for you. You can find out most of the solution list with this StackOverflow thread.

For this demonstration, working solution was to set registry as follows.

npm config set registry="http://registry.npmjs.org/"

Now again run the update command for @angular/cli as follows and If you found any vulnerabilities packages then fix them using “npm audit fix”.

ng  update @angular/cli

After running update command for @angular/cli successfully, this will remove angular-cli.json from the project and add new file as angular.json and update other configuration files too.

STEP 2: Update Core Packages

Now it’s time to update Angular Core packages and RxJS Packages if using. You can use commands as follows respectively.

ng update @angular/core

ng update rxjs

Once above command will successfully execute then you will find all the core framework packages have been updated. To confirm it, you can check package.json.

Note: To check, if anything is not updated correctly. Run the command ng update. It will give you a proper message if anything, you have missed.

So, your final Package.json will look like as follows. 

<code>{
  "name": "@coreui/angular",
  "version": "1.0.6",
  "description": "Angular 5 to 6", 
  "copyright": "",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "^0.4.5",
    "@angular/common": "6.1.0",
    "@angular/compiler": "6.1.0",
    "@angular/core": "6.1.0",
    "@angular/forms": "6.1.0",
    "@angular/http": "6.1.0",
    "@angular/platform-browser": "6.1.0",
    "@angular/platform-browser-dynamic": "6.1.0",
    "@angular/router": "6.1.0",
    "@angular/upgrade": "6.1.0",
    "ag-grid": "^17.1.1",
    "ag-grid-angular": "^17.1.0",
    "angular-split": "^1.0.0-rc.3",
    "bootstrap": "^4.0.0-beta.2",
    "chart.js": "^2.7.2",
    "core-js": "2.5.1",
    "file-saver": "^1.3.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "mydatepicker": "^2.6.3",
    "ng2-charts": "1.6.0",
    "ngx-bootstrap": "^2.0.4",
    "ngx-order-pipe": "^2.0.1",
    "ngx-pagination": "^3.1.0",
    "node": "^9.4.0",
    "popper.js": "^1.14.1",
    "rxjs": "6.2.2",
    "rxjs-compat": "^6.0.0-rc.0",
    "simple-line-icons": "^2.4.1",
    "ts-helpers": "1.1.2",
    "xlsx": "^0.13.3",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "^6.1.1",
    "@angular/compiler-cli": "6.1.0",
    "@types/jasmine": "2.6.3",
    "@types/node": "8.0.50",
    "codelyzer": "4.0.1",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "^5.4.0",
    "ts-node": "3.3.0",
    "tslint": "5.8.0",
    "typescript": "2.9.2"
  },
  "engines": {
    "node": ">= 6.9.0",
    "npm": ">= 3.0.0"
  }
}</code>

Step: 3 NPM packages install

After completing two steps as above, you have updated your configuration files. Now, the next step to delete node_modules folder, which contains old packages and their dependencies and install all packages again with the following command.

npm install

NOTE: If you have already made any extra changes manually in some of the files of any packages. Then try to keep the backup of that packages folders before running above command.

Once, the above command will execute successfully and all NPM packages will install, try to make build to make sure, everything is working fine with command as follows.

ng build –prod

Once you have made build successfully, It means, you have upgraded your Angular 5 app into Angular 6. Now run the project using ng serve command.

If you have an Angular project with any other version and still want to upgrade it then you can visit following URL.

https://update.angular.io/

Here you will get all the guidelines to upgrade your existing Angular version project to expected Angular version project.

Go to the above URL and select your existing Angular project version and expected Angular version in which you are willing to upgrade. Apart from this, you can define your app complexity. So that you can get the guidelines in more detail and at the last click to “Show me how to update” and you will get “Angular Update Guide” to update your project. So, in this way, you can upgrade any Angular version project to your willing version project.

Conclusion

So, today we have learned how to upgrade your existing Angular 5 project to Angular 6.

I hope this post will help you. Please put your feedback using comment which helps me to improve myself for next post. If you have any doubts please ask your doubts or query in the comment section and If you like this post, please share it with your friends. Thanks