[Solved] Why does this interceptor fail to add the token? ```typescript intercept(req, next) { const token = this.authService.getToken(); const cloned = req.clone(); cloned.headers.... | Angular

Angular - HTTP Client

Why does this interceptor fail to add the token? ```typescript intercept(req, next) { const token = this.authService.getToken(); const cloned = req.clone(); cloned.headers.set('Authorization', `Bearer ${token}`); return next.handle(cloned); } ```

AHeaders are immutable; set() does not modify cloned.headers in place

BgetToken() returns a Promise and needs await

Cclone() must include headers explicitly

Dnext.handle() must be called with original req

Step-by-Step Solution

Solution:

Step 1: Understand immutability of HttpHeaders
set() returns a new HttpHeaders instance; it does not modify in place.
Step 2: Identify missing assignment of new headers
Must assign the result of set() back to headers when cloning.
Final Answer:
Headers are immutable; set() does not modify cloned.headers in place -> Option A
Quick Check:
HttpHeaders set() returns new instance [OK]

Quick Trick: Assign set() result to headers when cloning request [OK]

Common Mistakes:

MISTAKES

Assuming set() modifies headers directly
Not assigning new headers to cloned request
Ignoring async token retrieval

Master "HTTP Client" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Why does this interceptor fail to add the token?

Step 1: Understand immutability of HttpHeaders

Step 2: Identify missing assignment of new headers

Final Answer:

Quick Check:

Want More Practice?