Angular 5 CLI + ASP.NET Core backend in 20m!

This tutorial is based on my “hands on” at the DevES conference in December, 2017.

The idea is to have a fully working application with a frontend using angular 5 CLI and a backend using ASP.NET Core 2 in only 20m. Time is running… let’s begin!

Disclaimer: This tutorial was created using macOS, but you can follow it using Windows or linux.

First let’s start with the backend, just open visual studio, select  New Project, then  ASP.NET Core Web API and give it a name.

Open the   ValuesController  file and add the following:

public JsonResult GetWelcomeText() => new JsonResult("Hello from DevES 2017!");

This will create an action named  welcome-text that will simply return a JSON with the quoted text.

Now let’s open the  Startup.cs file and add the following code inside  ConfigureServices :

services.AddCors(options => {
    options.AddPolicy("CorsPolicy", builder =>

You should definitely customize this policy to your situation, but for this demo, it’s good enough!

Finally, the last thing we need to do inside the backend is to add the following line of code inside  Configure :


This will tell our backend to use the policy we just created. That was it with the backend. Now, let’s move to the frontend.

Install node and npm, if you don’t have it yet and then run the command:  npm install -g @angular/cli, that being done, run the command  ng new name-of-your-app. This will create an angular 5 CLI app and install its packages.

Open the  environment.ts and files inside environments folder and add the  baseUrl property. On the  environment.ts file use the value:  'http://localhost:5000/', on the  .prod file you can add your production URL for the backend app.

Now, add the file  request.service.ts to your project and use the code below:

import { environment } from '../environments/environment';
import {
} from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/finally';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/empty';

const ApiUrl: string = `${environment.baseUrl}api/`;

export class RequestService {
        private http: Http
    ) { }

    makeGet<T>(url: string): Observable<T> {
        return this.makeRequest<T>('get', this.getUrl(url, false));

    makePost<T>(url: string, data?: Object): Observable<T> {
        return this.makeRequest<T>('post', this.getUrl(url), data);

    makePut<T>(url: string, data?: Object): Observable<T> {
        return this.makeRequest<T>('put', this.getUrl(url), data);

    makeDelete(url: string): void {
        this.makeRequest('delete', this.getUrl(url));

    private makeRequest<T>(type: string, url: string, data?: Object): Observable<T> {
        let request = null;
        let bodyString = data != null ? JSON.stringify(data) : "";
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        switch (type) {
            case "get":
                request = this.http.get(url, options);
            case "post":
                request =, bodyString, options);
            case "put":
                request = this.http.put(url, bodyString, options);
            case "delete":
                request = this.http.delete(url, options);

        return request
            .map((res: Response) => res.json())
            .catch((error: any) => {
                if (error.status == 500) {

                return Observable.empty();

    private getUrl(url: string, isBase: boolean = false): string {
        let currentUrl: string = (isBase ? environment.baseUrl : ApiUrl) + url;
        let isFirstRun: boolean = true;

        return currentUrl;

This file will manage all outgoing connections and provide better maintainability for our app. Now, create a file named and use the following content:

import { Injectable } from '@angular/core';
import { RequestService } from './request.service';
import { Observable } from 'rxjs/Observable';

export class ValuesStore {
    constructor(private requestService: RequestService) { }

    getWelcomeText(): Observable<string> {
        return this.requestService.makeGet<string>('values/welcome-text');

This file abstracts the outgoing communication even further, grouping them by subjects (controller in our case). After that, inject these providers to your  app.module.ts file. It should look like this:

    declarations: [
    imports: [
    providers: [
    bootstrap: [AppComponent]
export class AppModule { }

Finally we’ll work on the  app.component.ts and  app.component.html files. Change the  app.component.ts file to this:

import { Component } from '@angular/core';
import { ValuesStore } from './';

    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {
    title = '';

    constructor(private valuesStore: ValuesStore) {
        this.title = 'Heading to server';

        setTimeout(() => {
            this.valuesStore.getWelcomeText().subscribe(resp => {
                this.title = resp;
        }, 2000);

Here we add a call to our previously created values store requesting the  getWelcomeText method and updating the title of our app with its response. The  setTimeout usage here is only for demonstration purposes, since it’ll allow us to see the title change. As for the  app.component.html file we’ll use:

<div style="text-align:center">

That was it, now open visual studio again and run your project, open a terminal on your root frontend project folder and run  npm start. That’s it, your app is up and running in under 20m!

The complete code for both projects is below:

For a more comprehensive and “correct” way structuring your angular app, please read the series about architecting an angular app:



No Comments

You can leave the first : )

Leave a Reply

Your email address will not be published. Required fields are marked *