title: Export service from another module in Angular 2
body: <p>I'm trying to create a reusable service within a separate module, much like <a href="https://angular.io/styleguide" rel="nofollow noreferrer">Angular 2's styleguide</a>. However I get an error when I trying to use that service within another service:</p>
  
  <p><code>Uncaught Error: Can't resolve all parameters for AttendanceSummaryService:</code></p>
  
  <p>Here is my core module:</p>
  
  <pre><code>import { NgModule, Optional, SkipSelf } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { throwIfAlreadyLoaded } from './module-import-guard';
  import { HttpClientService } from './httpClient.service';
  import { HttpModule } from '@angular/http';
  
  @NgModule({
      imports: [
          CommonModule,
          HttpModule
      ],
       exports: [],
       declarations: [],
       providers: [HttpClientService]
  })
  export class CoreModule {
      constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
          throwIfAlreadyLoaded(parentModule, 'CoreModule');
      }
  }
  </code></pre>
  
  <p>My <code>HttpClientService</code>:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers } from '@angular/http';
  
  @Injectable()
  export class HttpClientService {
  
      constructor(private http: Http) { }
  
      createAuthorizationHeader(headers: Headers) {
          headers.append('Authorization', 'Bearer ' + '');
      }
  
      get(url) {
          let headers = new Headers();
          this.createAuthorizationHeader(headers);
          return this.http.get(url, {
              headers: headers
          });
      }
  
      post(url, data) {
          let headers = new Headers();
          this.createAuthorizationHeader(headers);
          return this.http.post(url, data, {
              headers: headers
          });
      }
  }
  </code></pre>
  
  <p>And my app.module which imports the core module:</p>
  
  <pre><code>import { NgModule, ApplicationRef } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HttpModule } from '@angular/http';
  import { AppComponent } from './app.component';
  import { AttendanceSummaryService } from './home/attendance-summary.service';
  import { CoreModule } from './core/core.module';
  import { HttpClientService } from './core/httpClient.service';
  
  import {FormControl, FormGroup,  ReactiveFormsModule} from '@angular/forms';
  
  
  @NgModule({
    bootstrap: [AppComponent],
    declarations: [
      AppComponent,
      AttendanceSummaryComponent,
    ],
    imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      HttpModule,
      CoreModule
    ],
    providers: [
      HttpClientService,
      AttendanceSummaryService    
  
    ]
  })
  export class AppModule {
    constructor(public appRef: ApplicationRef) { }
  }
  </code></pre>
  
  <p>And the service which consumes the <code>HttpClientService</code>:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Rx';
  import { AttendanceSummary } from './attendance-summary.model';
  import { Http, Response, Headers, RequestOptions } from '@angular/http';
  import { HttpClientService } from '../core/httpClient.service';
  
  
  Injectable()
  export class AttendanceSummaryService {
  
      private apiBaseUrl = '/api/v1/agency/attendances/';
      constructor(private http: HttpClientService) { }
  }
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>Thanks.</p>