cannot read properties of undefined (reading "toastrService")

[karthi-the-programmer]

Getting the below error when inject the toaster service in another service file.

on version 13.2.1

[amariq]

Yeah, that's because Overlay service used by ToastrService injects the Angular's ApplicationRef inside constructor. Meaning if you try to inject the toastr before the ApplicationRef is initialized it will result in deps cycle (or silent fail, as in your case, it seems), and the ErrorHandler is being created exactly before that moment.

The easy solution: instead of directly injecting the toastr, use injector.get(ToastrService) manually for this case. It works, but the topics like this will continue popping up until it actually handled properly (like #917, #804, #327, #179, #137 and so on).

The best solution: the author should use injector.get(ApplicationRef) inside the Overlay service when needed instead of inject(ApplicationRef) at creation time. It would fix the root of problem once and for all, no more strange toastr is undefined and this._appRef.attachView is not a function errors for everyone.

[passee]

Got the same issue. even with injector it tells me toastrservice is undefined with angular cli v16

Cannot read properties of undefined (reading 'toastrService')

    export class WebAPIService {

constructor(private httpClient: HttpClient, @Inject(Injector) private injector: Injector) {}

config: Config;

headers = {
    "Cache-Control": "no-cache, no-store, must-revalidate, post-check=0, pre-check=0",
    Pragma: "no-cache",
    Expires: "0",
};

async getConfig() {
    this.config = await firstValueFrom(this.httpClient.get<Config>("assets/config.json", { headers: this.headers }));
}

getMatchingPartners(search: string, explicitSearchList: ExplicitSearch[]) {

    return this.httpClient
        .get<DataInterface[]>(
            this.config.ServerUrl + `x/x?search=${search}&explicitSearch=${JSON.stringify(explicitSearchList)}`,
            {
                headers: { "Content-Type": "text/plain; charset=utf-8" },
                responseType: "json",
                observe: "body",
                reportProgress: true,
                withCredentials: false,
            }
        )
        .pipe<any>(catchError(this.handleError));
}

private get toastrService(): ToastrService {
    return this.injector.get(ToastrService);
}

private handleError(error: any) {
    this.toastrService.error("An unexpected error has occurred.", "Error", {
        closeButton: true,
        timeOut: 5000,
        onActivateTick: true,
    });
    return error;
}

} edit: the injection works, but the issue is trying to use toastrService in the handleError(). it seems that in this context toastrservice is undefined for some reason

[amariq]

@passee The problem in your case is just method context binding — use

catchError(this.handleError.bind(this))

or

catchError(error => this.handleError(error))