Intercept http and add headers - IONIC - ionic4

Question

I'm running a Ionic 4 app which contains an http interceptor to add some loading between the requests.
I also have a credential service which validates whether there is a token in my storage or not.
this is my interceptor
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.requests.push(req);
this.loaderService.isLoading.next(true);
return new Observable(observer => {
const subscription = next.handle(req)
.subscribe(
event => {
if (event instanceof HttpResponse) {
this.removeRequest(req);
observer.next(event);
}
},
(err: Error ) => {
this.alertservice.info(err.message, 'id1');
this.removeRequest(req);
observer.error(err);
},
() => {
this.removeRequest(req);
observer.complete();
});
// remove request from queue when cancelled
return () => {
this.removeRequest(req);
subscription.unsubscribe();
};
});
}
It works, but when I'm trying to add the following lines, it stops working and redirects to my error page and consoles nothing, I can't track it.
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
//console.log(this.credentialService.credentials.token);
// console.log(authToken);
Can anyone help me understand why does it happen, and how to fix?

Answer 1

I just figured it out and feel stupid,
this.credentialService.credentials was null since there is none before logging in, so the interceptor sends me to error section, to fix, I first validate if it's not null, then add headers properly:
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let clonedReq: any;
if (this.credentialService.credentials !== null) {
const authToken = this.credentialService.credentials.token;
clonedReq = req.clone({headers: req.headers.set('Authorization', authToken)});
} else {
clonedReq = req.clone({headers: req.headers.delete('Authorization')});
}
{...}