Angular Injectable Toastr Service is undefined

Question

I created a custom Toastr service (more of a wrapper class if you will). I inject this in my data service (api calls) but every time I call it I get an error that its undefined. If I use this service in a component then it works fine.

I think it might have to do how I use it in my Put call.

How I export my ToastrWrapperClass

@Injectable()
export class ToastrAlertService {

I inject it here and it references my correct service

@Injectable()
export class UserService {

    constructor(
        private http: HttpClient,
        private apiEndpointService: ApiEndpointsService,
        private adapter: UserAdapter,
        private toastrAlertService: ToastrAlertService,
    ) { }

Here I call my Handle Error (I think it might be by how I am handling the 'catchError' here

public put(model: User): Observable<User> {
    const headers = new HttpHeaders()
        .set('Content-Type', 'application/json');

    const putModel = {
        Model: model,
    };

    return this.http.put(this.apiEndpointService.apiUrl(this.apiType + '/'), JSON.stringify(putModel), { headers }).pipe(
        map((data: any) => this.adapter.adapt(data)), catchError(this.handleError),
    );
}

This toastrAlertService is 'undefined' when the error gets returned from my API

handleError(error) {
    this.toastrAlertService.showErrorToast(error);
    return throwError(error);
}

Answer 1

Handling the catchError as follows solved it for me. (I did move the handle error logic to a single class to make the code cleaner)

 return this.http.put(this.apiEndpointService.apiUrl(this.apiType + '/'), JSON.stringify(model), { headers }).pipe(
        map((data: any) => this.adapter.adapt(data)),
        catchError(err => {
            this.apiErrorHandlerService.handleError(err);
            return of(null);
        }),
    );