Creating the base project (ASP.Net Core - Angular 8.x)

Hi there! This post is part of a series where I am trying to build my own ASP.NET Core and Angular 8.x VS starter template, you may want to check out the rest if this interests you.

Let's jump right in with building our ASP.Net Core - Angular 8.x Visual Studio template.


I am working off the assumption that the following conditions are met on your development machine:

Create the base web-app

When building a POC the first thing I do is start with the built-in Angular ASP.NET Core template offered by Visual Studio.

Set your project name, select a location to save the project and make sure you select Angular as the project type.

Once VS has finished scaffolding the application I normally quit VS and rename the ProjectName folder to src and add in a starter .gitignore file.

If you are interested here is the commit for this step.

Upgrading the "ClientApp"

Next we will want to upgrade (in this case it's easier to replace) the existing ClientApp to the latest version of Angular, this is pretty simple to do actually.

The first thing we need to do is delete the original ClientApp folder (commit for that here).

Next, we will create a new ClientApp project in the original ones place, to do this open a terminal in the ./src/MyWebApp folder and run the following command:

ng new ClientApp

You will be prompted to answer a couple of questions to setup your application followed by Angular installing all the required node modules.

At this point you can open the project in VS and run it normally:

You can use something like Angular Augury to confirm that you are running the latest Angular version (at the time of writing that was 8.2.1).

Upgrading the ClientApp can be found in this commit should you be interested.

Great success, we are now running the latest version of Angular in our template.

What's Next

In the next post we will be adding Angular Material to the template, and perhaps even add a default layout depending on the length of the post.

See you then.