title: ERROR TypeError: this.authService.injectAuthHeaders is not a function
body: <p>I am getting following error</p>
  <p>Issue is i have a abstract class which is not getting injected, i dont know how to inject abstract class.</p>
  <blockquote>
  <p>looks like the issue is the abstract class AbstractHubService (hub.ts)
  which contain the line
  this.authService.injectAuthHeaders(options.headers);  not injected
  properly. I have given @Injectable({
  providedIn: 'root'   })  But i have not provided that in the app.module.ts and i am unable to provide that in app.module.ts , since
  it is an abstract class, how to inject an abstract class?</p>
  </blockquote>
  <pre><code>ERROR TypeError: this.authService.injectAuthHeaders is not a function
  at ApisService.options (hub.ts:142:31)
  at ApisService.getActivity (apis.service.ts:602:29)
  at AppComponent.loadAsyncPageData (app.component.ts:91:13)
  at SafeSubscriber._next (page-base.component.ts:50:22)
  at SafeSubscriber.__tryOrUnsub (Subscriber.js:183:1)
  at SafeSubscriber.next (Subscriber.js:122:1)
  at Subscriber._next (Subscriber.js:72:1)
  at Subscriber.next (Subscriber.js:49:1)
  at BehaviorSubject._subscribe (BehaviorSubject.js:14:1)
  at BehaviorSubject._trySubscribe (Observable.js:42:1)
  </code></pre>
  <p>Here is my child class</p>
  <pre><code>@Injectable ()   
  export class ApisService extends AbstractHubService{ 
    private cachedApis: Api[] = null;
   /**
       * Constructor.
       * @param http
       * @param config
       */
    constructor( http: HttpClient,  config: ConfigService,authService: IAuthenticationService) {
      super(http, authService, config);
  }
     
  </code></pre>
  <p>Here is my parent abstract class</p>
  <pre><code>    @Directive({})  
        @Injectable({
          providedIn: 'root'
        })
       export abstract class AbstractHubService {
       
           private apiBaseHref: string;
           private editingBaseHref: string;
           private utilBaseHref: string;
       
           /**
            * Constructor.
            * @param http
            * @param authService
            */
           constructor(protected http: HttpClient, 
              protected authService: IAuthenticationService,
               protected config: ConfigService) {
               this.apiBaseHref = this.config.hubUrl();
               this.editingBaseHref = this.config.editingUrl();
               this.utilBaseHref = this.config.utilUrl();
              
           }
  
         protected options(headers: {[header: string]: string}, authenticated: boolean = true): any {
           let options = {
               headers: headers
           };
            if (authenticated) {
               this.authService.injectAuthHeaders(options.headers);
           } 
           return options;
       }
  </code></pre>
  <p>Here is the interface</p>
  <pre><code>   @Directive({})
      @Injectable({
      
          providedIn:'root'
      
      })
       export abstract class IAuthenticationService {
   /**
        * Called to inject authentication headers into an API REST call.
        * @param headers
        */
       abstract injectAuthHeaders(headers: {[header: string]: string}): void;
   
     
  </code></pre>
  <p>This is app.module.ts</p>
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      ActivityItemComponent
    ],
    imports: [
      BrowserModule,
      HttpClientModule,
      RouterModule.forChild(APP_ROUTES)
    ],
    providers: [ConfigService,ApisService,{provide: 'IAuthenticationService', useClass: ApisService}],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>The function injectAuthHeaders are defined in three places</p>
  <p><a href="https://i.stack.imgur.com/xyf5a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xyf5a.png" alt="enter image description here" /></a></p>