Setting up an ASP.NET Core Project with Angular 2 Utilizing Angular CLI

March 28, 2017

We all reach a point in our software development careers where we want to pioneer some new technology that is in preview or has just hit full release. The problem we often run into is the lack of resources and documentation because of its newness. These resources are often critical whether you are troubleshooting a minor bug or setting up an entirely new project that integrates several separate technologies together. In this blog we are going to solve that problem and tackle integrating ASP.NET Core and Angular2 (with angular-cli). This is all done in Visual Studio 2017.

You need the following installed to continue along with this blog:

  • Angular CLI (https://cli.angular.io/) – “The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications.”
  • Node.js (https://nodejs.org/en/) – “A JavaScript runtime build on Chrome’s V8 JavaScript engine.”
  • Webpack (https://webpack.github.io/) – “Module Bundler”
  • Typescript (https://www.typescriptlang.org...) – “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.”
  • .NET Core (https://www.microsoft.com/net/...) – “.NET Core is a general purpose development platform maintained by Microsoft and the .NET community on GitHub. It is cross-platform, supporting Windows, macOS and Linux, and can be used in device, cloud, and embedded/IoT scenarios.”

Creating the project

We are going to use the ASP.NET Core Web Application (.Net Core) with the Web Application selected. This will give us a solid base upon which to build our project.

Create New Project
New Project Dialog

Create New Project Options
ASP.NET Core Options

Modify the ASP.Net Project

1. Update Startup.cs with the code below. This will setup the ASP.Net Core pipeline and services to work with Angular 2 

public class Startup
{
	public void ConfigureServices(IServiceCollection services)
	{
		// Add framework services.
		services.AddMvc();
	}

	public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
	{
		loggerFactory.AddConsole();

		if (env.IsDevelopment())
		{
			app.UseDeveloperExceptionPage();
			app.UseBrowserLink();
		}

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

Startup Cs Update
Startup.cs

2. Delete all actions in the HomeController 

3. Delete the Views folder

Home Controller And Solution
End Result

Set up the Angular Project

1. Open the command prompt and navigate to a temp directory

2. Call the angular-cli command ng new my-new-angular-name. This may take a few minutes

Ng New
Angular-CLI ng new

3. Navigate to the folder that was created by the command you just ran

File Copy Start
ng new Directory

4. Cut and paste the contents of this folder into your Visual Studio project’s directory. Your Visual Studio project should automatically pick up all of these files

File Copy End
Visual Studio Project Directory

5. Open the angular-cli.json file that should be a part of your project in Visual Studio now. Change the value for the outdir value from dist to wwwroot.

Angular Cli Json Update
angular-cli.json

Getting Build Ready

Before launch the application you should open the command prompt again and run ng build in the project directory. This will build and bundle your angular app for debugging. If you would like to have angular cli watch your code for changes, run the command ng build – watch instead. This will recompile your code any time you save changes to an angular specific file.

Ng Build
Angular-CLI ng build

Run the App!

App Run

(Bonus) Hit the MVC endpoint from an Angular view

1. Create a new MVC endpoint in the HomeController.cs file

[HttpPost]
public ActionResult MyTest()
{
  var result = "Your post worked";
  return Json(result);
}

Mvc Endpoint
MVC Endpoint

2. Update your app.component.ts

Here we are adding handlers for a button to call our new MVC endpoint we just created.

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';
    successMessage: string = '';

    constructor(
        private http: Http
    ) {

    }

    onClick() {
        var promise = this.executePost();
        promise.then(response => this.onClickSuccess(response));
    }

    onClickSuccess(response: string) {
        this.successMessage = response;
    }

    executePost(): Promise<any> {
        var promise = this.http.post("Home/MyTest", null)
            .toPromise()
            .then(
            function Success(response) {
                return response.json();
            }
            );
        return promise;
    }
}

App Component Ts Update
app.component.ts

3. Update the app.component.html

Here we are adding the button to call to the backing file of the view.

<h1>
  {{title}}
</h1>
<button type="button" (click)="onClick()">Test!</button>
{{successMessage}}

App Component Html Update
app.component.html

4. Run ng build in the command prompt again

5. Run the app and test your button

App Run Button Start
Application pre MVC call

App Run Button End
Application post MVC call

Information and material in our blog posts are provided "as is" with no warranties either expressed or implied. Each post is an individual expression of our Sparkies. Should you identify any such content that is harmful, malicious, sensitive or unnecessary, please contact marketing@sparkhound.com.

Meet Sparkhound

Review our capabilities and services, meet the leadership team, see our valued partnerships, and read about the hardware we've earned.

Engage with us

Get in touch with any of our offices, or check out our open career positions and consider joining Sparkhound's dynamic team.