Upgrade to Angular 7 in 5 Simple Steps

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 [email protected] --save-dev
4. Now, migrate the configuration of angular-cli.json to angular.jsonng update @angular/cli
ng update @angular/coreIf 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.

If you enjoyed this article and want to learn more about Angular, check out our compendium of tutorials and articles from JS to 8.