Creating an ASP.NET Core SPA Application with Angular 6 CLI support
I have been working with Angular in my day job for a couple of years, starting with the initial betas of Angular 2, so when I decided to create a new personal APS.NET Core application, I knew I wanted the latest Angular 6 CLI support, together with the server side Angular support that Microsoft has added to ASP.NET Core in recent releases.
I use both Visual Studio 2017 (mainly for work) and Jetbrains Rider (mainly for personal projects) in my development, and both provide templates in their new project dialogs for Angular ASP.NET Core projects. However for both of these IDEs the current templates are based on Angular 5, and I wanted to use the latest Angular version. I initially tried to create a new project with Jetbrains Rider and then upgrade the Angular support to version 6 following the update procedure outlined on the Angular site. However for some reason I kept getting errors, so I had to go back to the drawing board and figure out a different way to do it. Here is what I was able to do to achieve that goal.
Pre-Requisites
You will need the following pre-requisites installed to make this work.
- Visual Studio 2017 update 7 or later or Jetbrains Rider 2018.2 or later
- .NET Core 2.1
- Node.js and npm latest
Creating the Initial ASP.NET Core Project
I am going to be using Jetbrains Rider for my examples.
While Rider provides an Angular template chose the Web API template as the Angular template is based on Angular 5. Once the project is created execute it and browse to the relative path “/api/values” to see that the controller action is called.
Adding Angular 6 Support to the Project
The next step is to add Angular 6 support to the project. We can do that by using npm to install/update Angular CLI and then use Angular CLI to create a new Angular 6 application. We could open a command prompt to execute these commands, but the beauty of Jetbrains Rider is that it includes a built-in terminal.
]
By default the terminal opens at the root of the solution. We install/update Angular CLI by executing the following npm command.
npm install -g @angular/cli
We can execute that command anywhere as it installs Angular CLI globally, but to add Angular 6 to our project we need to make sure we are at the project root (the folder where the “.csproj” file is located.
We can now execute the Angular CLI command to create a new App.
ng new ClientApp
It takes a while for Angular CLI to build the app but once finished your project should look like this
Adding ASP.NET Core Angular Middleware
For the full Angular story we need to add the Angular middleware provided in Microsoft.AspNetCore.SpaServices. To do that we first register the SPA service in the ConfigureServices method of the Startup.cs class.
Angular CLI will publish our script files and any other static assets (css, images etc) to ClientApp/dist, so this tells the SPA middleware where our distribution files are located. Next we need to add the SP middleware to the ASP.NET Core pipeline.
Replace the app.UseMvc() statement in the template with the following code
We can now again run the application and we should see the following Angular 6 site.
Wire up the Angular App with the Web API Controller
To complete the setup lets wire-up the Angular application so it can call the ASP.NET Web API Controller. To do that we can replace the code in the app.component.ts file with the following TypeScript.
Next we need to make sure that the HttpClientModule is imported into our application. To do that replace the code in app.module.ts with the following.
And finally we need to update the html template file so we can render the values returned, by adding the following somewhere.
Now if you run the application you should see something like this, dependning on how you updated the html template.
Now you have a working ASP.NET Core project with complete support for the latest version of Angular CLI.