Injected service is undefined

Question

I have the following HandleService:

@Injectable() export class HandleService { constructor(private notificationService: NotificationService) { } success(message: string) { this.notificationService.printSuccessMessage(message); } error(error: HttpErrorResponse) { if (error.error instanceof ErrorEvent) { // A client-side or network error occurred. Handle it accordingly. this.notificationService.printErrorMessage(error.error.message); console.error('An error occurred:', error.error.message); } else { // The backend returned an unsuccessful response code. // The response body may contain clues as to what went wrong, this.notificationService.printErrorMessage(error.message); console.error( `Backend returned code ${error.status}, ` + `body was: ${error.error}`); } // return an observable with a user-facing error message return throwError( 'Something bad happened; please try again later.'); }; }

And thats the used NotificationService:

@Injectable() export class NotificationService { private _notification: any = alertify; constructor() { } openConfirmationDialog(message: string, okCallback: () => any) { this._notification.confirm(message, function (e) { if (e) { okCallback(); } else { } }); } printSuccessMessage(message: string) { this._notification.success(message); } printErrorMessage(message: string) { this._notification.error(message); } openAlertDialog(message: string) { this._notification.alert(message); } }

I use HandleService like this:

@Injectable() export class CustomerService { constructor(public http: HttpClient, private authService: AuthService, private handleService: HandleService) { } deleteCustomer(customer: Customer): Observable<any> { return this.http.delete(BASE_URL + customer.id, this.authService.setHeaders('application/json')) .pipe( tap(() => this.handleService.success(`Deleted customer: ${customer.name}`)), catchError(this.handleService.error) ); } }

So when everything works fine this.handleService.success('Deleted customer: ${customer.name}') is executed which works as expected. If an error occurs, this.handleService.error is executed, but it does not print the error message, instead i get the following error cannot read property 'printErrorMessage' of undefined. So notificationService in my handleService is undefined here, but why? Its injected in the constructor and it works correctly on the succes-method. Why isnt it working in the error-method?

Maybe you should add the Module declaration to your post so people stop telling you to provide the services? — Roddy of the Frozen Peas
– Roddy of the Frozen Peas, Commented Nov 20, 2019 at 14:47

noamyg · Accepted Answer · 2019-11-20 14:39:21Z

My guess: The scope of this.handleService.error is different when passed as a parameter and not executed (inside of your deleteCustomer function).

Replace it with this.handleService.error.bind(this)

Doflamingo19 · Accepted Answer · 2019-11-20 14:33:44Z

1

Have you had your service in your app.module.ts ?

providers: [HandleService,NotificationService],

answered Nov 20, 2019 at 14:33

Doflamingo19

1,6395 gold badges17 silver badges36 bronze badges

2 Comments

Johar Zaman Over a year ago

It will give error if not provided. It won't undefined I think.

M.Dietz Over a year ago

Ye, it is provided. Like i said, its working correctly for the succes method which wouldnt be the case if there was a provider issue.

Leandro · Accepted Answer · 2019-11-20 14:35:59Z

Add service on providers array in App.module.ts, or you can use:

 @Injectable({ providedIn: 'root' })

AlleXyS · Accepted Answer · 2019-11-20 14:37:19Z

0

You don't need to add any provider to app.module.ts

Just add decorator ahead your service class

@Injectable({ providedIn: 'root' }) export class CustomerService

same for HandleService

answered Nov 20, 2019 at 14:37

AlleXyS

2,5983 gold badges20 silver badges44 bronze badges

1 Comment

Roddy of the Frozen Peas Over a year ago

Only if it is appropriate that the services in question be provided at root, of course.

Collectives™ on Stack Overflow

Injected service is undefined

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Related