Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

ASP.Net Core api + Angular 2 +TypeScript

0.00/5 (No votes)
6 May 2017 1  
Integrate ASp.Net Core api with Angular 2 using TypeScript

Introduction

There are a lot of approaches creating one project that integrates ASP.NET core 1.0 api with angular2.  I faced the last week a lot of struggles with them. The project has a lot of conflicts and not easy to work with and webpack os so complicated. With the project getting larger it became very slow to use, Plus if you want to do any change any typescript file you have to compile the whole project.

I decided to create my own approach.  I created two separate projects the ASP.NET core and developed it by VS2017 and the other is Angular by Visual Studio Code which is pretty fast and compiles on the fly.

Background

You have to have Nodejs, TypeScript, Visual Studio 2017 and Visual Studio Code

Using the code

Create an ASP.NET Core project. a straight forward project with the demo class

Image 1

Run the project. It will run using the localhost with a port. 

Image 2This is the function that we will call in the angular project.

C++
//
 [Route("api/[controller]")]
    public class ValuesController : Controller
    {
        // GET api/values
        [HttpGet]
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }
    }
//

Now we want to create the angular project

 

To install the CLI, we'll use Node and npm

<code>npm install -g angular-cli</code>

 

Go to the project directory

To start a new application, just run the command:

<code>ng new ProjectName</code>

 

Open Visual Studio Code:

open the folder of the angular project and update the app.components.ts

C++
//
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import {globalVariables} from "./globals";


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

   constructor(http: Http) {
        http.get(globalVariables.apiurl + '/api/values').subscribe(result => {
          this.values=result.json()
          this.title += " -> " + this.values[0] +"," +  this.values[1] ;
            console.log(this.values);
        });
}
}

//

 

 

I create globalVariables class "service" to contain the value of the url of the api, as it will be used in many places and it can be changed in the publish process.

The Global variable: globals.ts

Image 3

 

C++
export let globalVariables = {
  AppName:"test",
  apiurl: "http://localhost:50434", // the api url
};
//

 

It is working:

Image 4

 

Points to be aware of 

  • The two projects are hosted in a different port, that is why we need the constant of the url path of the api in the angular project.
  • in the publish both projects will be merged so the constant can be empty.
  • Chrome is stopping you from crossing url between two urls so you need this extention: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en-US

 

Points of Interest

I created this as a proof of concept. It is just starting to create your own project I learned a lot while working wth the whole templates that merge the two projects. 

History

Keep a running update of any changes or improvements you've made here.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here