title: Angular2 Injected custom service is undefined
body: <p>I am trying to inject one custom service(<strong><em>MessageService</em></strong>) into another custom service(<strong><em>ItemService</em></strong>). It throwing an error <strong><em>MessageService</em></strong> is undefied in <strong><em>ItemService</em></strong>.<br/>
  But both the Services (MessageService and ItemService) are working fine with components.</p>
  
  <p><strong>mani.ts</strong></p>
  
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app.module';
  const platform = platformBrowserDynamic();
  platform.bootstrapModule(AppModule);
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { AppComponent }   from './app.component';
  import { routing, routedComponents } from './app.routing';
  import { ItemService } from './services/item.service';
  import { MessageService } from './services/message.service';
  import './rxjs-extensions';
  
  
  @NgModule({
    imports:      
    [ BrowserModule, 
      routing, 
      FormsModule, 
      ReactiveFormsModule,
      HttpModule,
  
    ],
    declarations: [ AppComponent, routedComponents],
    providers: [
      MessageService,ItemService 
    ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>message.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Subject }    from 'rxjs/Subject';
  import { Message } from '../models/message';
  
  @Injectable()
  export class MessageService {
      constructor() { }
  
      showError(msg: string) {
          console.log('MessageService Alert::'+msg);
      }
  
  }
  </code></pre>
  
  <p><strong>item.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response, Headers, RequestOptions } from '@angular/http';
  import { Item } from '../models/item';
  import { MessageService } from '../services/message.service'
  import { Observable } from 'rxjs';
  
  @Injectable()
  export class ItemService {
  private restUrl = 'http://localhost:3000/';  // URL to web api
  
    constructor(
      private http: Http,
      private msgService: MessageService) { }
  
    getAllItems(): Observable&lt;Item[]&gt; {
      return this.http
        .get(this.restUrl+'items')
        .map( (res: Response) =&gt; res.json() as Item[])
        .catch(this.handleError);
    }
  
    private handleError(error: any): Promise&lt;any&gt; {
      console.error('An error occurred', error);
      let errorMsg = error.message || error;
      this.msgService.showError("errorMsg"); // msgService is undefined here.
      return Promise.reject(errorMsg);
    }
  
  }
  </code></pre>
  
  <p>here the msgService is undefined in ItemService.
  can anyone help me to resolve this ?</p>