Configure ASP.NET Core

Next, we’ll install the dependencies, ensure we don’t get TypeScript compile errors, and configure our server.

1. Open your .csproj file

2. Modify the .csproj file

Modified .csproj file

Add the following packages:

<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.2" /> <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.1" />

In our case, the MVC package enables us to add Controllers to build an API and the StaticFiles package enables us to configure our server to serve static files from a specific directory, /wwwroot by default.

Since we will eventually have TypeScript files in our project, we should also disable any TypeScript compilation errors.

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

After saving the file, your dependencies should download automatically.

If you’re using MacOS/Linux, run dotnet restore to install the dependencies.

3. Open the Startup.cs file

In the ConfigureServices(...) method, add:

services.AddMvc();

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

app.Use(async (context, next) => {

await next();

if (context.Response.StatusCode == 404 &&

!Path.HasExtension(context.Request.Path.Value) &&

!context.Request.Path.Value.StartsWith("/api/")) {

context.Request.Path = "/index.html";

await next();

}

}); app.UseMvcWithDefaultRoute(); app.UseDefaultFiles();

app.UseStaticFiles();

4. Create a Controller

Remove everything in the class except for the Get() method

[Route("api/[controller]")]

public class ValuesController : Controller { [HttpGet]

public IEnumerable<string> Get() {

return new string[] { "Hello", "World" };

} }

Create the Angular Application

Now that the web server is built, let’s add a touch of front-end dazzle.

1. Open a Command prompt in the project location

Open a terminal/command prompt and navigate to your project’s directory

cd "D:\src\misc\SuperCoolApp\SuperCoolApp\"

2. Install the Angular-CLI

npm install @angular/cli --global

3. Scaffold a new Angular application

ng new {kebab-cased-app-name-here} --skip-install

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

4. Move the files to the root of the project

Drag them to the project node — delete the old folder

5. Enable HTTP and Form Binding

Open your src/app/app.module.ts file and import the FormsModule and HttpModule

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http'; @NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

FormsModule,

HttpModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

6. Open the .angular-cli.json file

Set “outDir” to “wwwroot”

When the Angular-CLI to builds the application, it will now output the assets to the /wwwroot directory — the same directory we configured ASP.NET Core to serve static files from.

7. Call the our server’s API from the Angular app

Open the src/app/app.component.ts file and update it to:

import { Component, OnInit } from '@angular/core';

import { Http } from '@angular/http' @Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

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 Angular is running on the server, it will make a GET request to the ValuesController we created and return a string array.

app.component.html

Next, open the src/app/app.component.html file and update it to:

<h1>Application says what?</h1>

<ul>

<li *ngFor="let value of apiValues">{{value}}</li>

</ul>

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

8. Install the Angular application’s dependencies