ERROR TypeError: this.authService.injectAuthHeaders is not a function

Question

I am getting following error

Issue is i have a abstract class which is not getting injected, i dont know how to inject abstract class.

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?

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)

Here is my child class

@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);
}
   

Here is my parent abstract class

    @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;
     }

Here is the interface

   @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;
 
   

This is app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    ActivityItemComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forChild(APP_ROUTES)
  ],
  providers: [ConfigService,ApisService,{provide: 'IAuthenticationService', useClass: ApisService}],
  bootstrap: [AppComponent]
})
export class AppModule { }

The function injectAuthHeaders are defined in three places