Building Single Page Applications on ASP.NET Core 2.1 with Angular 6 – Part 1: Getting Started

This is the first in a new series of posts on building Single Page Applications with ASP.NET Core 2.1 and Angular 6. There have been major improvements to both frameworks, so this is a good time to have a fresh look.

This post covers the prerequisites, demonstrates how to create a new application using the built-in SPA template, and describes how to upgrade to Angular 6 (the template uses Angular 5).

Prerequisites

Please ensure you meet the following prerequisites before getting started:

Install .NET Core 2.1 SDK
Install Node.js (version 8 or later)
Ensure that ASPNETCORE_ENVIRONMENT is set to Development

Create a new application

ASP.NET Core 2.1 includes built-in templates for creating Single Page Applications using Angular or React. These templates can be accessed using Visual Studio 2017 or the command prompt. In this guide we will use the command prompt, since this approach works for Windows, Mac, or Linux.

Begin by creating a new folder for your application and complete the following steps:

Create the new application:

mkdir AngularSpa
cd AngularSpa
dotnet new angular

In ASP.NET Core 2.1, HTTPS is enabled by default. You will need to trust the HTTPS Development Certificate by running this command:
```
dotnet dev-certs https --trust
```
Next, restore client-side dependencies using npm (this will take several minutes):
```
cd ClientApp
npm install
```
Run the new app:
```
cd ..
dotnet run
```
Launch your browser and navigate to https://localhost:5001/. If everything is working, you will see the following page:

The next step is to upgrade from Angular 5.2 to 6.

Upgrade to Angular 6

Upgrading Angular is now relatively simple. To get an overview, take a look at the Angular Update Guide.

Open the command prompt to the ClientApp directory and run the following commands:

Update your Angular CLI globally:

cd ClientApp
npm install -g @angular/cli

Update your Angular CLI locally:
```
npm install @angular/cli@latest
```
Migrate Angular CLI configuration to the new angular.json format:
```
ng update @angular/cli
```
Update all of your Angular framework packages:
```
ng update @angular/core
```
Update package.json, changing line 7 as follows:
```
"start": "ng serve",
```
Run the upgraded app:
```
cd ..
dotnet run
```

Done. The app is now running the latest version of Angular, TypeScript and RxJS. The following sections include tips on improving productivity.

Running “ng serve” independently

As per the documentation, the project is configured to start its own instance of the Angular CLI server in the background when the ASP.NET Core app starts in development mode. This feature is designed with convenience in mind, but I find that productivity suffers as it can take up to 10 seconds to launch the application after making a backend change.

Recommend switching it off by updating the Configure method within Startup class as follows:

// spa.UseAngularCliServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

Now when you want to launch the application:

First, start the Angular CLI server:
```
cd ClientApp
npm start
```
Then, start the ASP.NET Core app:
```
dotnet run
```

This will ensure your application will launch quickly when making either frontend or backend changes.

Running the app with “dotnet watch”

A change to a backend file currently requires restarting the ASP.NET core app. We can avoid this altogether by starting the app with dotnet watch – a tool that restarts the app when changes in the source code are detected.

Going forward, use dotnet watch run instead of dotnet run. This will ensure changes made to the backend will cause the application to automatically restart thereby improving your overall productivity.

Source Code

If you ran into any issues, you might like to download a completed version of source code here; Coding Flow on GitHub. If that doesn’t help, please be sure to post a comment below.

Next Steps

In this post, I have provided an overview of creating a SPA with ASP.NET Core. If you would like to dive deeper into this topic, take a look at the following resources:

In the next post, I’ll show you how to upgrade your SPA to the latest version of Bootstrap.

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