Registering the generic typed declarations in Angular Module

Question

I have the following typescript service code that I wish to expose via a new Angular module.

Generic Service

import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
import { AuthHeaders } from "./auth.headers";

export abstract class BaseHttpService<T> {
  baseAPIUrl: string;
  serviceAPISegment: string;
  private requestOptions = {
    headers: this.authHeaders.getHeaders()
  };

  constructor(
    private httpClient: HttpClient,
    private authHeaders: AuthHeaders
  ) {}

  get<T>(): Observable<T[]> {
    return this.httpClient.get<T[]>(
      `${this.baseAPIUrl}\\${this.serviceAPISegment}`,
      this.requestOptions
    );
  }
}

Module Declaration

import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { BaseHttpService } from "./asyncServices/http/base.http.service";


@NgModule({
  imports: [
    HttpClientModule
  ],
  declarations: [
    BaseHttpService
  ]
})

export class SharedModule {}

I get error in the BaseHttpService which is given below

ERROR in src/app/shared/shared.module.ts(11,5): error TS2322: Type 'typeof BaseHttpService' is not assignable to type 'any[] | Type'. Type 'typeof BaseHttpService' is not assignable to type 'Type'. Cannot assign an abstract constructor type to a non-abstract constructor type.

I have tried the following BaseHttpService BaseHttpService<>

which all are not working. Please suggest the suitable way to register the service in this module.

Poul Kruijt · Accepted Answer · 2018-11-26 10:52:18Z

2

Depending on which module you want to use it, you have to use a { provide ..., useClass ...} construct inside of the module you import the SharedModule. So if you want to use it in some kind of module:

@NgModule({
  imports: [
    SharedModule
  ],
  providers: [
    {  provide: BaseHttpService<any>, useClass: SomeKindHttpService<any> }
  ]
})
export class SomeKindModule {}

and have your service extend the BaseHttpService

export class SomeKindHttpService<T> extends BaseHttpService<T> {
  constructor(
    httpClient: HttpClient,
    authHeaders: AuthHeaders
   ) {
     super(httpClient, authHeaders);
   }
}

answered Nov 26, 2018 at 10:52

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arne · Accepted Answer · 2018-11-26 10:52:21Z

1

There are two issues here. A service is not a declaration, but provided. It should be in the "provided" property of the module instantiation. Also, how would you expect the Angular DI system to figure out how to provide an abstract class? It would need to know what T is, and it has no way to figure that one out.

answered Nov 26, 2018 at 10:52

Arne

8521 gold badge6 silver badges13 bronze badges

Comments

Michael Filler · Accepted Answer · 2022-12-14 21:08:44Z

1

The service is abstract and so it cannot be instantiated. You should make it non abstract or let another service extend it.

Also the service should ne be added to the declaration property of the modue, but to the property "providers".

edited Dec 14, 2022 at 21:08

answered Nov 26, 2018 at 10:52

Michael Filler

3382 silver badges12 bronze badges

Collectives™ on Stack Overflow

Registering the generic typed declarations in Angular Module

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related