Click here to Skip to main content
13,667,657 members
Click here to Skip to main content
Add your own
alternative version

Stats

6.3K views
2 bookmarked
Posted 6 May 2017
Licenced CPOL

ASP.Net Core api + Angular 2 +TypeScript

, 6 May 2017
Rate this:
Please Sign up or sign in to vote.
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

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

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

//
 [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

//
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

 

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

 

It is working:

 

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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Hamdy Ghanem
Software Developer (Senior)
Egypt Egypt
Hamdy Ghanem
Senior Software Engineer / System Architect
Experience: +11 years
http://www.linkedin.com/in/hamdyghanem
hamdy.ghanem@gmail.com
Graduated from Munifia University, faculty of science, Math and computer science department May 1999

Experience Brief
11+ years of experience in software development field.
In these years I used most of common software developing tools of Microsoft, And with many nationalities and cultures.
I worked in large scale projects of client side, desktop, web application and mobile phones that involved integration with other system using different technologies I've been working using .NET technologies for 8 years.
Currently, I work as a senior software engineer for CogWin as well as a testing/QA consultant. We develop large scale applications for a high profile customer.
Beside developing and managing, I worked in the last year as a professional tester from developer point of view and applying software evaluation metrics on source code and reverse engineering.
I worked as a team leader more than four years
My experience involved using agile methodology using team foundation server
from 1year I am very interested in Android development
I have a published some applications in the Android Market

Strong skills troubleshooting and debugging production systems are essential
My key skills
High performance, hard worker and new technologies enthusiast
Specialties
C#,VB.net, C++, Java ,php, Python , OOP SQL Server (2000, 2005, 2008),Oracle, Mysql , Java , SSRS ,Source safe, Ontology, Android, ASP.NET ,Ajax, • WPF,WCF, Entity Framework, LINQ, CFG , state machine , Ontology, Decision Tree , Cloud Systems, CRM ,JavaScript, XML, UML, Crystal report , LINQ, Silverlight

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180820.1 | Last Updated 7 May 2017
Article Copyright 2017 by Hamdy Ghanem
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid