Subscribe not working angular2

Question

I am new to angular 2 and I am trying to get data from a service.The problem is data is not displayed and the services component does not show up in the network tab under chrome developer tools

This is my Service

import { Injectable } from '@angular/core';
import { Http,Response } from '@angular/http';
import { Observable } from 'rxjs';
import { DCSComponent } from '../dcs/dcs.component';
import 'rxjs/add/operator/map';

@Injectable()
export class ServicesService {

   constructor(private http:Http) { }

   extractdata(res:Response) {
     return <DCSComponent[]>res.json();
   }

   getdata():Observable<DCSComponent[]> {
      return this.http.get('http://localhost:53158/api/Test').map(this.extractdata);
   }
}

And this is the component subscribing to the service ,

import { Component, Input,OnInit } from '@angular/core';
import { ServicesService } from '../services/services.service';

@Component({
  selector: 'app-dcs',
  templateUrl: './dcs.component.html',
  styleUrls: ['./dcs.component.css'],
  providers: [ServicesService]
})

 export class DCSComponent implements OnInit  {
   data: any[];

   constructor(private servicesService : ServicesService){ }

   ngOnInit(){
    this.servicesService.getdata().subscribe(data=>this.data=data);
   }
}

app module just in case

import { BrowserModule } from '@angular/platform-browser';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AlertModule} from 'ng2-bootstrap';
import { AppComponent } from './app.component';
import { DCSComponent } from './dcs/dcs.component';
import { HCMComponent } from './hcm/hcm.component';
import { FinanceComponent } from './finance/finance.component';
import { EmployeeComponent } from './employee/employee.component';
import { HelperComponent } from './helper/helper.component';
import { TravelRequestComponent } from './dcs/travel-request/travel-request.component';
import {RouterModule} from '@angular/router';

import { ServicesService } from './services/services.service';
import { DataComponent } from './data/data.component'
@NgModule({
  declarations: [
    AppComponent,
    DCSComponent,
    HCMComponent,
    FinanceComponent,
    EmployeeComponent,
    HelperComponent,
    HelperComponent,
    TravelRequestComponent,
    TravelRequestComponent,
    DataComponent,     
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
        [AlertModule.forRoot()],
    RouterModule.forRoot([
      {path:'CreateRequest',component:TravelRequestComponent},
      {path:'welcome',component:HelperComponent},
      {path:'',redirectTo:'welcome',pathMatch:'full'}
    ])
  ],
  providers: [ServicesService],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

Network tab:

Answer 1

I suggest its highly useless to have a extractdata() method when you are going to use it as below which works in just one line.

getdata():Observable<DCSComponent[]>
{
  return this.http.get('http://localhost:53158/api/Test')
                  .map((res: Response) => <DCSComponent[]>res.json());
}

However to fix your problem you should be using this way

getdata():Observable<DCSComponent[]>
    {
      return this.http.get('http://localhost:53158/api/Test')
                      .map((response: Response) => this.extractdata(response));
    }

As solved through remote teamviewer, following are the mistakes which you made

1. HelperComponent should not be the component during routing as in app.module
2. You are having the services in the DCS component so you need to initiated.
3. that Null error was because selector was null and so that error from zone.js
4. data: any[]; is decalared but not defined. so I it in the constructor.