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.


knoldus-advt-sticker

Written by 

Rudar Daman Singla is the Trainee Software Consultant at Knoldus Software LLP. He has done B.Tech. from Jaypee University of Information technology, Waknaghat(Solan). He has good knowledge of languages C, C++, Java, Scala, HTML, CSS, PHP, Node and Angular. He is also interested in VFX. As a fresher, he always tries to explore the different type of software and tools.

Leave a Reply

%d bloggers like this: