Angular & ASP.NET Core (2.2) App - daaren-urthling/tutorials GitHub Wiki

This tutorial show how to build a web application using ASP.NET Core and Angular. NOTE: this tutorial refers to ASP.NET Core release 2.2 and Angular 6.x. Check out other tutorials for newer versions of the platforms.

Everything is done with Visual Studio Code and from the command line, using the Angular and the .NET Core CLI.

Prerequisites

Create the project

Scaffold the ASP.NET Core project with the .NET CLI:

dotnet new webapi -o HelloApp

open the folder with VS Code:

code HelloApp

VS Code will prompt to install missing assets to build the application, answer "yes".

SPA Support

Our Angular front-end app is a so-called Single Page Application (SPA), and we need to configure our ASP.NET Core web app to properly serve it.

Open the Startup.cs file, and add this line in the ConfigureServices(...) method:

services.AddSpaStaticFiles( c =>
{
  c.RootPath = "wwwroot";
});

Replace everything in the Configure(...) method with the following:

app.UseMvcWithDefaultRoute();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseSpa(spa => 
{
  spa.Options.SourcePath = "wwwroot";
});

Adapt the sample controller

The .NET Core CLI scaffolded a sample controller for us, we will change its content for the purposes of our app.

In the Controllers folder open the file named ValuesController.cs and change it in this way:

...
  [HttpGet]
  public IEnumerable<string> Get() 
  {
     return new string[] { "Hello", "World" };
  }    
...

Create the Angular App

From the terminal window in VS Code scaffold a new Angular application using the Angular CLI:

ng new hello-app --skip-install

This will scaffold the Angular app without automatically installing the dependencies.

Move the files of the my-app folder to the root of the project, and remove the empty folder.

Install the Angular application’s dependencies

npm install

Enable HTTP and Form Binding: open your src/app/app.module.ts file and import the FormsModule and HttpModule

...
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
...
imports: [
...
    FormsModule,
    HttpModule
]
...

When the Angular-CLI to builds the application, it output the assets to the /dist directory.

We need to change it to the /wwwroot directory — the same directory we configured ASP.NET Core to serve static files from. Open the .angular-cli.json file and set the out dir:

...
"outDir": "wwwroot",
...

Now we will make our Angular front-end calling our server’s API: open the src/app/app.component.ts file and update it to:

...
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'
...
export class AppComponent implements OnInit {
   constructor(private _httpService: Http) { }
   apiValues: string[] = [];
   ngOnInit() {
      this._httpService.get('/api/values').subscribe(values => {
         this.apiValues = values.json() as string[];
      });
   }
}
...

When the Angular will open, it will make a GET request to the ValuesController we adapted and return a string array.

To show the result in the app page, open the src/app/app.component.html file and change its content to:

<h1>Hello Application</h1>
<p *ngFor="let value of apiValues">{{value}}</p>

The *ngFor loop will iterate over each value of the apiValues array and output each one into a <p> item.

Build and Run the Web Application

We need to apply some final settings before running our application.

Open the file Properties\lauchSettings.json and change it in this way:

...
"HelloApp": {
...
  "launchUrl": "/",
  "applicationUrl": "http://localhost:5000",
...
}

we are not interested in https by now, and we open the browser to the root of the app, which will be served with our Angular front-end.

Finally we can build and run our application

Build the Angular application

ng build

Run the application

dotnet run

Opne the browser and navigate to http://localhost:5000 to see the result.

Improving the development cycle

We will need probably to debug our applications, so we are going to adjust what happens when we press F5.

If during debugging we need to modify something in our app, we need to stop it, rebuild it (server part, client part or both) and run it again.
A nice feature of Angular is the support for hot reloading, that let us change something in the HTML or typescript code and having it recompiled and reloaded on the fly.

To do this, we need to launch the Angular app with ng serve; the Angular watcher is working by default on port 4200, but we are serving it from another one, 5000.
To make this work we need to create a proxy in our ASP.NET Core application.
In the startup.cs file, change the Configure(...) method in this way:

...
app.UseSpa(spa => 
{
...
  if (env.IsDevelopment())
  {
     spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
  }
});
...

To run and debug our application:

  • open a terminal window and launch ng serve
  • press F5 to start the debugger on the ASP.NET Core part

Note: .NET Core supports hot reloading also, but this is not (yet) compatible with the debugger

In case we need to change something in the front-end, we just change the files and save, Angular will recmpile and reload the app on-the-fly.
If we want to change something in the back-end, we stop the ASP.NET Core app, make the changes and press F5 again. We can leave the Angular app running in the meantime.

⚠️ **GitHub.com Fallback** ⚠️