This page looks best with JavaScript enabled

Update Angular 6 to Angular 7 version

 ·  ☕ 2 min read  ·  ✍️ Adesh

Right now, Angular 7 has been officially released. So, in this blog, we are going to learn, how to update Angular 6 or  older version to Angular 7.
In first few steps, we are going to use Windows Powershell with Administrator.

Check the existing versions of Node.JS, NPM and Angular CLI
Run these commands to check these versions.
Check Node.JS version

node -v

Check NPM version

npm -v

Check Angular CLI version

ng -v

See the below screenshot for above 3 commands.

Here, in the above screenshot, you can see we have Node version v8.11.1, NPM version v6.0.0 and Angular CLI version 6.0.0.
Updating to Angular CLI 7
In the next step, we are going to uninstall existing Angular CLI using this command.

npm uninstall -g angular-cli

After successfully uninstallation, we are going to install latest Angular CLI, which is Angular 7.
Run this command to install Angular CLI 7.

npm install -g @angular/cli@latest

This will successfully install the Angular CLI 7. See the below screenshot for above commands.

Check the latest Angular 7 version

Now, you can check the latest version of Angular CLI 7 by running this command.

ng --version

See the below screenshot.

Creating Angular 7 based application
Now, after successfully updating Angular v6 to v7, we are now going to create a new Angular 7 app named testproj.

ng new testproj

This command will ask 2 questions, shown in below screenshot.

Updating the Packages

Run these commands to update these packages.

ng update @angular/core

ng update rxjs

Above 2 packages will be updated. See the below screenshot.

Now, run this command to open the application in browser window.

ng serve --open

This will open the app in your browser window.

Updated Package.json file

If you open your application, and check the package.json file, you will see most of the dependencies are in version 7.0.0.

Router Modules injected by default
In the initial steps, Angular CLI asked for installing the routes, so you can app.routing.module.ts file in the project folder.

Summary

So, in this blog, we learned how to update Angular v6 to v7, and create the application in same updated version.

I hope you will enjoy reading this blog.

Cheers!

Reference

https://update.angular.io/

Further Reading

Creating your first app in Angular 7

Reactive form programming in Angular 7

Custom Directives in Angular 7

Share on

Adesh
WRITTEN BY
Adesh
Technical Architect