title: Angular 6 JwtInterceptor
body: <p>I am trying to implement a JWT interceptor using Angular 6. For some reason, the interceptor is not adding the Authorization header to my server requests. I have console logged in the JWTInterceptor provider class and everything, and it doesn't seem like the class is being called at all, even though I've added it to the Providers list in my AppModule. Basically, it seems like my interceptor is completely invisible, or that HTTP_INTERCEPTORS is not working. </p>
  
  <p>./_helpers/jwt.interceptor.ts</p>
  
  <pre><code>    import { Injectable } from '@angular/core';
      import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from 
      '@angular/common/http';
      import { Observable } from 'rxjs';
  
      @Injectable()
      export class JwtInterceptor implements HttpInterceptor {
      intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): 
      Observable&lt;HttpEvent&lt;any&gt;&gt; {
      // add authorization header with jwt token if available
      let currentUser = JSON.parse(localStorage.getItem('currentUser'));
      if (currentUser &amp;&amp; currentUser.token) {
          request = request.clone({
              setHeaders: { 
                  Authorization: `Bearer ${currentUser.token}`
              }
          });
      }
  
           return next.handle(request);
       }
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import { HttpModule } from '@angular/http';
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import {BrowserAnimationsModule} from '@angular/platform- 
  browser/animations';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { NounService } from './noun.service';
  import { NojqueryComponent } from './nojquery.component'
  import { AppRoutingModule }     from './app-routing.module';
  
  import { FaderComponent } from './fader.component';
  
  import {AngularMaterialModule} from './angular-material.module';
  
  @NgModule({
    declarations: [
      AppComponent,
      FaderComponent,
      NojqueryComponent
  
        ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule,
      ReactiveFormsModule,
      HttpModule,
      BrowserAnimationsModule,
      AngularMaterialModule,
  
    ],
    providers: [
      NounService,
      { 
        provide: HTTP_INTERCEPTORS, 
        useClass: JwtInterceptor, 
        multi: true 
      }
  
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>My package.json angular dependencies</p>
  
  <pre><code> "@angular/animations": "^6.1.0",
  "@angular/cdk": "^6.4.1",
  "@angular/common": "^6.1.0",
  "@angular/compiler": "^6.1.0",
  "@angular/core": "^6.1.0",
  "@angular/forms": "^6.1.0",
  "@angular/http": "^6.1.0",
  "@angular/material": "^6.4.1",
  "@angular/platform-browser": "^6.1.0",
  "@angular/platform-browser-dynamic": "^6.1.0",
  "@angular/router": "^6.1.0",
  </code></pre>
  
  <p>My app.ts express header specs</p>
  
  <pre><code>  this.app.all('/*', function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "http://localhost:4200");
        res.header("Access-Control-Allow-Credentials", true);
       res.header("Access-Control-Allow-Headers", "*");
       next();
      });
  </code></pre>