Over a million developers have joined DZone.

Upgrade to Angular 7 in 5 Simple Steps

DZone 's Guide to

Upgrade to Angular 7 in 5 Simple Steps

Now that Angular has committed to bi-annual upgrades, knowing the steps involved in taking your app from one version to the next is a must.

· Web Dev Zone ·
Free Resource

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

  1. First, upgrade the Angular version globally by adding the latest version via the terminal: sudo npm install -g @angular/cli@latest
  2. Upgrade the version locally in your project and make sure the changes for the new version are reflected in the package.json fileng update @angular/cli
  3. Upgrade all your dependencies and dev dependencies in package.json
    1. Dependencies:
      1. 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
    2. Dev Dependencies:
      1. 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
    3. Angular-devkit was introduced in Angular 6 to build Angular applications that required dependency on your CLI projects.
    4. Also, you'll need to upgrade the version for Typescriptnpm install typescript@2.9.2 --save-dev
  4. Now, migrate the configuration of angular-cli.json to angular.jsonng update @angular/cli
    ng update @angular/core
    If Angular material is used, use this command: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).
  6. Now, uninstall rxjs-compat as it is an unnecessary dependency for Angular 7.npm uninstall --save rxjs-compat
  7. Also changeimport { Observable } from 'rxjs/Observable';
     toimport { Observable } from 'rxjs';

Finally, start your Angular 7 application using ng serve.

A Few Important Points

  • Create a file browserlist without any extension in the src directory and add the below lines to it. This file is currently used by auto-prefixer 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
  • For IE 9 through 11 support, please remove 'not' from the last line of the file and adjust as needed.
  • 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 queries, visit angular official documentation for upgrade by clicking here.

angular ,angular 7 ,web dev ,application migration ,tutorial

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}