Simple ASP.NET core/Angular app

 After finding several confusing articles with hit-and-miss results, I thought I would record the simplest process I have found for creating a new Angular/ASP.NET web application.

The tools I am using

• Git: https://www.nuget.org/downloads
• Node.js, version 16.14.0: https://nodejs.org/en/download/
• npm, version 8.3.1 (included in the Node install)
• VS Code, version 1.65.1: https://code.visualstudio.com/download

Getting started

Once you've got the above tools installed, open a command prompt to the root folder where you do your development (for example, c:\dev on windows).  I advise creating a parent folder (replacing [yourapplicationname]):

mkdir [yourapplicationname]

Then 

cd [yourapplicationname]

 

Then (note the -UI at the end):

dotnet new angular [yourapplicationname]-UI

 

This will generate everything you need to start working on an ASP.NET core web app with an Angular front end.  However, it will install version 8 of Angular, which is pretty old (it was released in May, 2019 and -- at the time of this article --  the current version is 13.3.1).

At this point, there are a few considerations:

1. Do I care about using the latest versions of everything (specifically, Angular)?
2. Am I keeping this as simple as possible, or do I want to emulate a real production application?

Question 1 above is the biggest factor in how to proceed.  I found a number of articles that described different approaches but didn't explain the pros and cons that would lead you to pick one over the other.

Quick and easy - with an old version

If you're not concerned about the latest and greatest, you can start working on the code as is.  Upgrading such an old version can be a painful process, so I recommend going with some extra steps.

Almost as quick and easy - with the newest shinies

If you prefer to go with the most up-to-date framework versions, I suggest a little more work.

Open a command prompt and navigate to the web app folder you created before

cd c:\dev\[yourapplicationname]\[yourprojectname]-UI

Remove the Angular code created by dotnet:

rmdir ClientApp

Create a new Angular client app:

ng new ClientApp

You will be prompted to add Angular routing.  Type "y" to accept.

 You will be prompted for a stylesheet format.  Just hit enter to accept the pre-selected CSS.

Testing the base application

Open VS Code and select File > Open Folder and select the root folder of your application (C:\Dev\[yourapplicationname]).

Select Terminal > New Terminal.

In the terminal, navigate to the web application folder and start the application:

      cd [yourapplicationname]-UI       dotnet run

At the time of this article's publication, you may see some false error messages from Microsoft.AspNetCore.SpaServices[0] like

Generating browser application bundles (phase: setup)... or

 Γ£ö Browser application bundle generation complete.

These are due to the dotnet CLI misinterpreting progress output from Angular (see https://github.com/dotnet/aspnetcore/issues/21793).  There seems to be a stalemate currently on which team is going to address this so -- if it bothers you -- you can turn off Angular output by opening angular.json and adding "progress": false,

      "architect": {

        "build": {

          "builder": "@angular-devkit/build-angular:browser",

          "options": {

            "progress": false,

            "outputPath": "dist/client-app",

Once the app is running, you can open a browser window to https://localhost:5001/.