How to upgrade Angular 6 App to Angular 7 in Visual Studio Code

Build an app with ASPNET Core and Angular from scratch

In this tutorial, we are going to learn how to upgrade angular 6 app to Angular 7 application. And moreover, in this tutorial, we will also discuss some angular 7 features. So, first-of-all, we will discuss some core features of angular 7 and then finally, we will upgrade angular 6 app to angular 7 application

In previous tutorial, i have discuss how to create a new angular 7 project using visual studio 2017.

How to create an Angular 7 and Asp Net Core app using VS2017

Angular 7 core features

Now, in angular 7, you will see some new features that are listed below.

• When you will create a new angular application with “ng new yourProject” command, then a prompt will ask you to add features like routing and different type of styles.
• Now, it supports Typescript 3.1, RxJS 6.3, and Node 10.
• Angular 7 is more faster than previous version.
• Angular 7 will remove “reflect-metadata” polyfil from production.
• Angular 7 uses Budget Bundles. Application will warn you when your bundle will cross the limit 2mb (by default warning at 2mb) and application will error at 5mb(by default error at 5mb). You can easily adjust it according to your needs by just going to angular.json file.
• The Angular Material CDK : 

ScrollingModule: Angular 7 allows virtual scrolling which loads and unloads elements from DOM on the visibility of the data such as images or large lists.

DragDropModule: Now Angular 7 supports Drag and Drop feature. Now, user can drag and drop items to reorder or transfer items between lists.

How to upgrade angular 6 app to angular 7?

Let’s start to upgrade angular 6 app to angular 7.

This is very easy to upgrade angular 6 app to angular 7. You can do it with just one command. So, first-of-all, open the project which you have built in angular 6. Now, open command terminal and then run this below command in your terminal.

=> ng update @angular/cli @angular/core

After running this above command, you will see all the packages are now updated in your project. You can verify via package.json.

Note: – I am using visual studio code in this project, so i am using vs code terminal. But if you are using Visual Studio 2017 for this tutorial, then open command terminal and then you need to open your project directory where your project’s file “package.json” is located and now run the above command.

Now, build and run your application.

Thank you for reading. Keep visiting and sharing.