Interceptor.intercept Is Not A Function

Question

I've been trying to implement an application-wide interceptor, however, I keep seeing the following error:

TypeError: this.interceptor.intercept is not a function

After much debugging, I realized the reason why it's happening is because I have a service that is being called from a child component. When I use the custom interceptor from the app.component, everything works fine, but if I use it from a child component, I get that error. I am at a loss. Here is a code sample. I set it up in mostly the same way my app is set up:

https://angular-rbbkvv.stackblitz.io/test/index (there's no validation; no POST is made so data is collected)

As you can see, I am displaying the error, which is the error posted above. On top of that, if you follow the network tab, you will not see the POST being made.

I have spent days on this issue, and I'm at a loss. I really hope I am doing something very simple wrong.

I greatly appreciate your help!

score 9 · Accepted Answer · edited May 23 '18 at 01:48

9

You are using useValue in the following

providers: [
  { 
    provide: HTTP_INTERCEPTORS,
    useValue: MyHttpInterceptor,
    multi: true
  }
]

Replace it with useClass and it should work

edited May 23 '18 at 01:48

ConnorsFan

70,558
13
122
146

answered May 22 '18 at 23:16

Yousef khan

2,764
3
14
16

2

Thank you SO much. That was exactly what it was. I appreciate your help, and the little tidbit of info for future reference! – Sebastian Frohm May 23 '18 at 01:11

Interceptor.intercept Is Not A Function

1 Answers1