Angular + ASP.NET Core Quick Start with .NET Core CLI

Almost a year ago I created the Angular 2 + ASP.NET Core QuickStart using Visual Studio Code. In that quickstart I used the Yeoman generator for ASP.NET core apps to scaffold base the ASP.NET Core application. I then showed you how to manually configure TypeScript, configure and install client dependencies, configure ASP.NET Core, and more. It was a lot of work for a simple quick start!

Fortunately, things have become much easier since then, and we can now do all of this automatically by using the Microsoft.AspNetCore.SpaTemplates package and the .NET Core CLI.

Prerequisites

Ensure that you meet the prerequisites before continuing further:

  • Check your version of Node.js by running node -v
  • Check your version of dotnet by running dotnet --info

Install the project templates

First we need to install the Microsoft.AspNetCore.SpaTemplates package. This package contains Single Page Application (SPA) templates for ASP.NET Core that plugs directly into the .NET Core CLI and will work on Windows, Mac, and Linux.

To install the new project templates, execute the following command:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Create the project

Next, we will create the project. Navigate to the folder where you would like to create the project. Execute the following commands:

mkdir QuickStart
cd QuickStart
dotnet new angular
dotnet restore

Building and running the application

Execute the following command to build and run the application:

dotnet run

When you navigate to http://localhost:5000/ you will see the following quick start application:

Next Steps

In this post I showed you how simple it is to create a Angular + ASP.NET Core application using the Microsoft.AspNetCore.SpaTemplates package and the .NET Core CLI. In summary, you just run dotnet new angular and you are ready to start coding! There’s a lot more to learn, so please check out the following resources:

Thanks for reading, please feel free to post any questions or comments below.