63

I'm in the proces of adding an interceptor to my angular 6 project. To make calls to my API, I need to add a bearer token to all calls. Unfortunately the interceptor does not seem to be called. My code:

import { Injectable } from "@angular/core"; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http"; import { Observable } from "rxjs"; @Injectable() export class AuthInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { //Retrieve accesstoken from local storage const accessToken = localStorage.getItem("access_token"); //Check if accesToken exists, else send request without bearer token if (accessToken) { const cloned = req.clone({ headers: req.headers.set("Authorization", "Bearer " + accessToken) }); console.log('Token added to HTTP request'); return next.handle(cloned); } else { //No token; proceed request without bearer token console.log('No token added to HTTP request'); return next.handle(req); } } }

Does anyone know what could be causing this issue? Thanks in advance.

Improve this question
3
  • 4
    Do you provide HTTP_INTERCEPTORS in your app.module? Commented Jun 14, 2018 at 15:02
  • Thanks! I forgot to do that. Seems to be fixed now. If you post it as an answer ill mark it as solved. Commented Jun 14, 2018 at 15:09
  • This blog may be used laxmanchavda.blogspot.com/2018/10/… Commented Sep 23, 2021 at 9:09

12 Answers 12

Reset to default
142

In my case interceptor wasn't getting involved for service calls because I had imported HttpClientModule multiple times, for different modules.

Later I found that HttpClientModule must be imported only once. Doc ref

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thanks !! been trying to resolve this issue for 2 days straight... it was multiple imports of HttpClientModule
Spot on! Make sure that you do not import it twice or more. Check your shared module as well, in case you import any in your App Module. That was the issue for me, at least :)
This can also happen if the Service for which you want to intercept requests is (unnecessarily) added to the provided attribute of some (sub)module. Removing it from the list of provided services made the HttpInterceptor work again.
Wow!! thank's Praveen!
49

You use the right way to intercept.

For people who use interceptor, you need to do 2 modifications :

Interceptor in service

import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/do'; @Injectable() export class MyInterceptor implements HttpInterceptor { intercept( req: HttpRequest<any>, next: HttpHandler ): Observable<HttpEvent<any>> { return next.handle(req).do(evt => { if (evt instanceof HttpResponse) { console.log('---> status:', evt.status); console.log('---> filter:', req.params.get('filter')); } }); } }

Provide HTTP_INTERCEPTOR

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; (...) providers: [ { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true } ],

Read this article for more details. It's pretty good

Improve this answer

2 Comments

Keep in mind that rxjs has changed a lot. do operator now is called tap and needs to be used within a pipe() academind.com/learn/javascript/rxjs-6-what-changed
This is really quite out of date now
13

I had the exact same behavior with my standalone component (interceptors not intercepting my http requests).

If you use standalone components instead of importing HttpClientModule in your Module, note that you have to add withInterceptorsFromDi() in your provideHttpClient(...) to make your interceptors work! Or use the new way of functional interceptors via withInterceptors.

See this SO post for more details.

Improve this answer

3 Comments

To make it more clear in your providers (found in app.config.ts) it should look like this provideHttpClient(withInterceptorsFromDi()). I had been dealing with this problem for a month since I only had provideHttpClient(...)
I am not using standalone components but this resolved my issue. I have recently migrated to angular 19.
LLMs cannot answer this thanks :D
9

If you have a providers array for a module then you have to define the HTTP_INTERCEPTORS too for that module then only it will intercept the requests under that module.

e.g:

providers: [ // singleton services PasswordVerifyService, { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptorService, multi: true } ]
Improve this answer

1 Comment

Now what is the point of the angular-cli if it doesn't do this work for us 🤦
3

In my case, I had to import both HTTP_INTERCEPTORS, HttpClientModule in same module.

Improve this answer

2 Comments

if you add HttpClientModule & HTTP_INTERCEPTORS in your parent module then you'll not need to import these two in your sub-modules.
Same for me. Does it mean I can't add interceptors only for some child modules?
3

In my case i had a post method like this:

this.http.post<any>(this.authUrl, JSON.stringify({username: username, password: password})).pipe( map((response: any) => { let token: any = response.token; if (token) { localStorage.setItem('currentUser', 'value' })); return response; } else { return null; } }), catchError((error:any) => {return observableThrowError(error.json().error || 'Server error')}) );

Because the map method could return null the interceptor stopped intercepting the requests made with this post method call. Don't ask me why this is so, but as soon as i replace null with say response everything started working again.

Improve this answer

1 Comment

This helped me figured out how to fix my issue.. In my case, once the HTTP request fails, the subsequent request doesn't get intercepted. by returning null in catchError fixed mine
2

Check your module & sub-module files, If you have imported the interceptor in a sub-module, then move it to the root module and it should work.

Improve this answer

1 Comment

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
2

In my case the HttpClient was not used to do the requests.

Instead fetch has been used directly and that is not intercepted by angular.

Changed fetch(...) to http.get(...) and it worked

Improve this answer

Comments

1

Follow this rule when you are dealing with the HttpClientModule and HttpInterceptors, keep import HttpClientModue and Http Interceptor Register in the same Module. if you don't, some interceptors will be missing.

In general, we always import HttpClientModule and HttpInterceptors into the app.module.ts. Don't import HttpClientModule from child Module. If you really have to import HttpClientModule, remember to register the HttpInterceptors again in the same module. one such case is from Lazy Load Module.

Maybe someone still say that my HttpClientModule and HttpInterceptors are from the same module, why my httpClient not working as expected. So here, we have the last rule. make sure the httpClient instance is constructed after HttpClientModule imported and HttpInterceptors imported.

Improve this answer

Comments

0

In my case I accidentally had my service proivded providers : [ ApplicationService ] in my component when it wasn't supposed to be as I had it defined using providedIn: 'root'

Improve this answer

Comments

0

Please ensure that dependencies for the interceptor are also provided in the module. ProvidedIn:'root' for the interceptor dependency services did not work for me.

Improve this answer

Comments

0

In my case, since I am working with modules, I had to import the child module (AuthModule) in app.module.ts. I was just missing that.

imports: [ HttpClientModule, AppRoutingModule, AuthModule ]

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.