Angular2 Injected custom service is undefined

Question

I am trying to inject one custom service(MessageService) into another custom service(ItemService). It throwing an error MessageService is undefied in ItemService.
But both the Services (MessageService and ItemService) are working fine with components.

mani.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module.ts

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 { }

message.service.ts

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);
    }

}

item.service.ts

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<Item[]> {
    return this.http
      .get(this.restUrl+'items')
      .map( (res: Response) => res.json() as Item[])
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    let errorMsg = error.message || error;
    this.msgService.showError("errorMsg"); // msgService is undefined here.
    return Promise.reject(errorMsg);
  }

}

here the msgService is undefined in ItemService. can anyone help me to resolve this ?

Günter Zöchbauer · Accepted Answer · 2016-11-07 11:37:44Z

7

The problem is this. not ItemService

.catch(this.handleError);

should be

.catch(this.handleError.bind(this));

for this. to keep pointing to the current class instance inside handleError()

answered Nov 7, 2016 at 11:37

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nat4j Over a year ago

oh i see.. but if i do so getting typescript error as 'Observable<{}> is not assignable to type 'Observable<Item[]>'. still i couldn't make progress.

Günter Zöchbauer Over a year ago

I don't use TypeScript myself and don't know about generics in TS (in Plunker they are not checked). Perhaps .map<Object,Item[]>( (res: Response) => res.json() as Item[]).

Nat4j Over a year ago

changing .catch( res => { this.messageService.showAlert(res); return Observable.throw(res); }); is worked :-)

Collectives™ on Stack Overflow

Angular2 Injected custom service is undefined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related