• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / How to Create an Angular 7 and Asp Net Core app using Visual Studio 2017

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

November 29, 2018 by mebakar1005 Leave a Comment

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.

See also  Attribute-based Routing in ASP.NET Core

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:-)

Inline editing in Angular 6 and Asp Net Core Application using ag-grid
How to deploy Angular 6 & Asp Net Core App to Azure using Visual Studio

Related

Filed Under: Angular, Angular 5, Angular 6, Angular 7, ASP.NET Core Tagged With: .NET Core 2.0, .NET Core 2.2, ANGULAR, Angular 7, Angular 7 Tutorials, ASP.NET CORE

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • 4 Explicaciones por qué Ella le dio El hombro frío
  • Overland Park: más grande suburbio de Kansas City es en realidad un romántico Destino lleno de Exterior Actividades, Comida excelentes y Cultura
  • Lasting Online Dating Sites: Techniques For Survival
  • Plank Portal Computer software
  • How to get the Best Info Room Services
  • Very best Antiviruses Designed for PC Game enthusiasts
Copyright © 2022