title: Subscribe not working angular2
body: <p>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</p>
  
  <p>This is my <strong>Service</strong></p>
  
  <pre><code>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 &lt;DCSComponent[]&gt;res.json();
     }
  
     getdata():Observable&lt;DCSComponent[]&gt; {
        return this.http.get('http://localhost:53158/api/Test').map(this.extractdata);
     }
  }
  </code></pre>
  
  <p>And this is the <strong>component subscribing to the service</strong> ,</p>
  
  <pre><code>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=&gt;this.data=data);
     }
  }
  </code></pre>
  
  <p><strong>app module</strong> just in case </p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>Network tab:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/v6GcK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v6GcK.png" alt="enter image description here"></a></p>