API call is not hitting the controller from Angular 2 UI

Question

While calling the URL from angular 2 through http.get() it is going to exception and not hitting the debugger in the controller. I changed the proxy, checked the routing but those are same for my existing project. This Project I have newly added and it is causing problem.

It is basically Angular UI and in backend I have web apicontroller call to fetch the data same as other existing projects in the whole solution.

Please find the code below:

Component.ts

ngOnInit() {
        this.showpopup = true;
        this.getContent();
    }

getContent() {
        this.myService.getContent()
            .subscribe(
                response => {
                    this.showpopup = false;
                    this.contentList = response;

                },
                err => {
                    this.showpopup = false;
                    this.displayAlert("Error getting content.", this.errorAlert);
                }
            );
    }

Service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { MyProject} from '../models/interfaces/server-interfaces';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

export class MyService{
    public BASE_URL = 'api/myApp/';
    constructor(public http: Http) { }

    getContent(): Observable<MyProject.ProjectContent[]> {
        return this.http.get(this.BASE_URL + 'ProjectContentList')
            .map(response => response.json())
            .catch(err => Observable.throw(err));
    }
}

Controller.cs

    [RoutePrefix("api/myApp")]
    public class MyAppControllerController : ApiController
    {
        [Route("ProjectContentList")]
        [HttpGet]
        public async Task<HttpResponseMessage> GetContentAsync()
        {
            HttpResponseMessage response;

            try
            {
                //code here
            }
            catch (Exception ex)
            {
                //exception handled here
            }
            return response;
        }
}

I am new to Angular. Am I missing anything? Any help will be appreciated.

Answer 1

In service.ts change

from:

constructor(public http: Http) { }

to:

constructor(public http: HttpClient)

you module should look like this:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }   from './app.component';
import {HttpClientModule  } from '@angular/http';

@NgModule({
    imports:      [ BrowserModule, FormsModule, HttpClientModule  ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

take a look at place where HttpClientModule is imported. Do it like that and it should work.