how to create an Angular 7 application using Visual Studio 2017

Background

Currently (April 2019), using Visual Studio 2017, it is only possible to create an Angular 6 application, using the Angular Visual Studio template, also known as SPA templates. Microsoft are planning to upgrade the template to create an Angular 7 application using Visual Studio 2019 and DotNet Core 3.0.

However, since both Visual Studio 2019 and DotNet Core 3.0 are still in beta stage, many developers, particularly those working in large corporate environments will not be willing or able to live on the bleeding edge of DotNet Core 3 and Visual Studio 2019. So here is a very simple way to create an Angular 7 application for DotNet Core 2.2 that runs in Visual Studio 2017.

Update your environment

• Download the latest stable version of the DotNet Core SDK
• Make sure you have the latest version of the Angular CLI

Create Angular 6 Application Using Visual Studio 2017

• In Visual Studio 2017 select "File" then "New Project"
• From the "New Project" screen select "Asp.Net Core Web Application" and give the new solution a name
• From the "New Asp.Net Core Web Application" screen
  • keep ".Net Core" selected
  • select "Asp.Net Core 2.2" or greater for the DotNet Core version
  • Angular for the template
  • Click "OK"
• Ctl-Shift-B to build the solution which will also download the Nuget packages and NPM packages. 
• Run it by clicking F5.

You should now see an Angular 6 application working within an Asp.Net Core 2.2 website. 

Upgrade Angular Application to Angular 7

Upgrade the Angular application to version 7 by doing the following:

• Open a new command window at the level of the project root (not the solution root if they are different)
• Type cd "ClientApp"
• Type "ng update @angular/cli @angular/core"

From Visual Studio 2017 hit the F5 key to run the application or from Visual Studio Code (the best way to edit typescript code) type "DotNet run" in a new terminal.

That's it. You should have an Angular 7 application running in an Asp.Net Core website. You should also be able to use the Angular CLI from Visual Studio Code to add components, services and modules etc from the command line.

 

---