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
- .NET Core SDK (version RC4 or later)
- Node.js (version 6 or later)
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.
So much easier, hey! And it’s the same Steve Sanderson’s template, isn’t it? Cheers
Yep. 🙂 Check out the first link under Next Steps for a detailed overview of the template.
[…] Angular + ASP.NET Core Quick Start with .NET Core CLI […]
[…] February I wrote a quick post titled Angular + ASP.NET Core Quick Start with .NET Core CLI. Within that post, I introduced ASP.NET Core JavaScript Services and demonstrated how to create a […]
hi Jason, I am so new to this..I try your tutorial, but a after I go to my http://localhost:5000/ , I got blank page, why is that? . thanks in advance!