How to Create an Angular 7 and Asp Net Core app using Visual Studio 2017

Build an app with ASPNET Core and Angular from scratch

In this tutorial, we are going learn how to create a project with Angular 7 and Asp.Net Core 2.0 using visual studio 2017. We will use Angular project template(Single page project templates) to create a new project.

How to create a project with Angular 7 and Asp.Net Core 2.0 using Visual Studio 17.

Let’s create a new project with Angular 7 and Asp.Net Core 2.0 using visual studio 17 in step by step.

Step # 1 – Install some dependencies

Before going to next, you must have installed some dependencies like below list. If you have already installed these dependencies, then skip this step.

• .Net Core SDK for 2.0.0
• Asp.Net 2.0.0
• Node.js and npm (Latest version)
• Visual Studio 17
• Angular CLI(Command Line Interface)

Step # 2 – Create a new project

Now, in this step we will create a new Angular 7 and Asp Net Core  project in visual studio 17. So, follow the below steps.

Imp:-  Before moving next, you must have updated Angular CLI version. So, run the below command to update the latest Angular CLI.

=> npm install -g @angular/cli

It will take some time. And now run this below command to check the updated version of Angular CLI.

=> ng version

Now, you will see the output as you see the below screenshot.

Now, Open visual studio 17 => then click on file from upper menu (or press Ctrl+Shift+N) => then select new => then select Project => then select “Web” from right pane => then select “Asp.Net Core Web Application” from middle pane => then enter the name in “Name input field” => then click on browse button to specify your location => then click ok button.

After clicking the OK button, now you will see a new popup window with the name of “New Asp.Net Core Web Application – Angular7Project”. Now, select “.Net Core” and then select “Asp.Net Core 2.0” from upper dropdown => then select Angular template and then click ok button.

Then you will see the visual studio will create a new project with Angular and Asp.Net Core.

Now, verify the Angular version of your project via package.json.

If your project’s version is below to 7, then go to project folder structure and then delete the ClientApp folder and then open command prompt and then navigate to the specific directory of your project and then run this below command.

=> ng new ClientApp

After hitting this above command, your Angular 7 and Asp Net Core application will be ready. Now, you can verify the Angular version via package.json. Now, build and run your app.

Congratulation! You have successfully create Angular 7 app with Asp Net Core 2.0 using visual studio 17.

Thank you for reading. Keep visiting and sharing:-)

Note:- If you found this blog helpful then: Buy me a coffee