title: HttpInterceptor provided in Angular library is not working from Angular app
body: <p>I am developing an Angular library where there is an authentication module that provides an <code>HttpInterceptor</code>. The main idea is to have this interceptor working automatically in any app that imports this authentication module without having to do any extra setup at it.</p>
  
  <p>What I have so far is the following:</p>
  
  <p><strong>AuthenticationModule</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>@NgModule({
    imports: [ConcreteAuthModule],
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: BearerInterceptor,
        multi: true
      }
    ]
  })
  export class AuthenticationModule {
    static forRoot(config: AuthConfig): ModuleWithProviders {
      return {
        ngModule: AuthenticationModule,
        providers: [
          {
            provide: AUTH_CONFIG,
            useValue: config
          }
        ]
      };
    }
  }
  </code></pre>
  
  <p><strong>ConcreteAuthModule</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>@NgModule({
    imports: [ThirdPartyLibModule],
    providers: [
      {
        provide: AuthenticationService,
        useClass: ConcreteAuthService
      }
    ]
  })
  export class ConcreteAuthModule { }
  </code></pre>
  
  <p><strong>BearerInterceptor</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>@Injectable()
  export class BearerInterceptor implements HttpInterceptor {
    constructor(private authService: AuthenticationService) { }
  
    intercept(
      req: HttpRequest&lt;any&gt;,
      next: HttpHandler
    ): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      const headers: any = {};
  
      if (this.authService.isUserAuthenticated()) {
        headers.Authorization = `Bearer ${this.singleSignOnService.getUserToken()}`;
      }
  
      const authReq = req.clone({ setHeaders: headers });
  
      return next.handle(authReq);
    }
  }
  </code></pre>
  
  <p>And from a test Angular app I am importing this module the following way at the <strong>AppModule</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>@NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      HttpClientModule,
      AuthenticationModule.forRoot({ /* config stuff */ })
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>I checked how some third party libraries did this, also came across a couple of Stack Overflow questions that discussed about this and they all suggested having an Angular module created (I already have it: <code>AuthenticationModule</code>), then provide the http-interceptor on it (already have it too) and finally importing this module from an Angular app (also did this).</p>
  
  <p>But still, none of the http requests in my app are being intercepted.</p>
  
  <p>Tried importing the <code>BearerInterceptor</code> directly from my test app and providing it on the <strong>AppModule</strong> like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { BearerInterceptor } from 'my-lib':
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      HttpClientModule,
      AuthenticationModule.forRoot({ /* config stuff */ })
    ],
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: BearerInterceptor,
        multi: true
      }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>And that works! But this workaround is not what I am looking for...</p>