Upgrade to Angular 7 in 5 Simple Steps

Angular helps to build modern applications for the web, mobile, or desktop. Currently, Angular version 7 is the latest version. Up to date with the latest version is very important. Upgrading to angular 7 is just a few simple steps:

1. Firstly, upgrade the angular version globally by adding latest cli version

   sudo npm install -g @angular/cli@latest

2. Upgrade cli version locally in your project and the changes for the new version reflected on package.json file

   ng update @angular/cli

3. Upgrade all your dependencies and dev dependencies in package.json
   
   Dependencies:

   npm install --save @angular/animations@latest @angular/cdk@latest @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/flex-layout@latest @angular/forms@latest @angular/http@latest @angular/material@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/router@latest core-js@latest zone.js@latest rxjs@latest rxjs-compat@latest

   Dev Dependencies:

   npm install --save-dev @angular-devkit/build-angular@latest @angular/compiler-cli@latest @angular/language-service @types/jasmine@latest @types/node@latest codelyzer@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-jasmine@latest karma-jasmine-html-reporter@latest jasmine-core@latest jasmine-spec-reporter@latest protractor@latest tslint@latest rxjs-tslint@latest webpack@latest
   

   Angular-devkit is introduced in angular 6 to build the angular application which is now a required dependency on your cli projects. Also, upgrade version for Typescript

   npm install typescript@2.9.2 --save-dev

4. Now, migrate the configuration of angular-cli.json to angular.json

   ng update @angular/cli

   ng update @angular/core

   If the angular material is used:

   ng update @angular/material

5. Remove deprecated RxJS 6 features

   npm install -g rxjs-tslint

   rxjs-5-to-6-migrate -p src/tsconfig.app.json

   (Please, be patient and wait until the execution completes.)
   Now, uninstall rxjs-compat as it is the unnecessary dependency for Angular 7.

   npm uninstall --save rxjs-compat
   

   
   Also, change

   import { Observable } from 'rxjs/Observable'; 

   to 

   import { Observable } from 'rxjs';
   

Finally, start your Angular 7 application using

ng serve

Few Important Points:

• Create a file browserlist without any extension in the src directory and add below lines to it

  # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
  # For additional information regarding the format and rule options, please see: # https://github.com/browserslist/browserslist#queries 
  # 
  # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 
  
  > 0.5% 
  last 2 versions 
  Firefox ESR 
  not dead 
  not IE 9-11

• If you want detailed errors from zone.js then add 

  import 'zone.js/dist/zone-error';

  to top of the enviornment.ts file inside the environment directory.

• Move the karma.conf.js file to the src directory.
• Move the protractor.conf.js file to the e2e directory.
• Switch from 

  HttpModule -> HttpClientModule
  HttpService -> HttpClientService

I hope this article helps you to upgrade your angular application to Angular 7. For any other query, visit angular official documentation for upgrade by clicking here.