Angular - Providers for generic services

Question

I have created a generic service for my HTTP APIs and I want to provide this service for different endpoint without creating a class for each of my endpoints. My service looks like this

export class ApiService<T> {
  constructor(private httpClient: HttpClient, private otherDependency: OtherDependency, private subPath: string, private defaultHeaders = []) { }
}

And I am injecting it using tokens and providers like these ones

import { InjectionToken } from '@angular/core';

export const XXXToken = new InjectionToken<ApiService<XXX>('MyService');
export const XXXProvider = {
  provide: XXXToken,
  useFactory: (httpClient: HttpClient, dep: OtherDependency) => new ApiService<XXX>(httpClient, dep, 'xxx'),
  deps: [ HttpClient, OtherDependency]
};

Previous code will actually fail when trying to use my provider in the declarations of a NgModule and building in production mode (only in production mode). Error looks like

 Error during template compile of 'AppModule'
 Consider changing the function expression into an exported function.

Issue is coming from (httpClient: HttpClient, dep: OtherDependency) => new ApiService<XXX>(httpClient, dep, 'xxx')

I can make it work if I do something like

export function myFactory(httpClient: HttpClient, dep: OtherDependency) => new ApiService<XXX>(httpClient, dep, 'xxx');
export const XXXProvider = {
  provide: XXXToken,
  useFactory: myFactory,
  deps: [ HttpClient, OtherDependency]
};

However, because the provider and factory is more complicated than that, I've created an helper function to not have to repeat that code any time I am adding a new endpoint.

export func getProvider(token, subPath) {
  return {
    provide: token,
  useFactory: (httpClient: HttpClient, dep: OtherDependency) => new ApiService<XXX>(httpClient, dep, subPath),
  deps: [ HttpClient, OtherDependency]
  }
}

And in there I cannot use the export function trick because I want my subpath to be different everytime I am creating a new service.

Is there a way to get around this or am I stuck to repeating my provider creation every time I need it. I would be very sad since that would mean for example that I would have to change every provider creation anytime I need a new dependency on that service. === Edit === I want to be able to inject my services easily in any service/component without having to bin those other objects to the service creation or implementation detailes and there can be many services in one component. Ideally I would like something like that

export class MyComponent implements OnInit {
  constructor(private userService: ApiService<User>, private countryService: ApiService<countryService>) { }

  ngOnInit() {
    userService.get();
    countryService.get();
  }
}

But because javascript does not realy support generics, this cannot work because ApiService and ApiService are actually the same class. Therefore I currently need injection token anyway so I would be OK with

export class MyComponent implements OnInit {
  constructor(@Inject(UserToken) private userService: ApiService<User>, @Inject(CountryToken) private countryService: ApiService<countryService>) { }

Answer 1

since you want to provide same service with different end points, providing your end point config as an InjectionToken and injecting that token in your service would make your life easier. so change your service definition as follows;

export const MY_API_ENDPOINT = new InjectionToken<string>('MY_API_ENDPOINT');

@Injectable()
export class ApiService<T> {
  constructor(@Inject(MY_API_ENDPOINT) private endPoint: string) { }
}

when you inject ApiService through out your application, configure MY_API_ENDPOINT at provider level (doesn't matter whether it is at Component or Module level)

in component level

@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css'],
  providers: [ApiService, { provide: MY_API_ENDPOINT, useValue: "api.end.point.1" }]
})
export class Component1Component implements OnInit {}

or in module level

@NgModule({
  imports: [CommonModule],
  declarations: [Component3Component],
  exports: [Component3Component],
  providers: [ApiService, { provide: MY_API_ENDPOINT, useValue: "api.end.point.3" }]
})
export class App2Module { }

i created a demo that demonstrates both Component and Module level providers with different endpoints

https://stackblitz.com/edit/angular-4b5yb7

===== SECOND SOLUTION =====

above solution will not work if a component needs same service with two different end points. so we need a way to create same service instances with different parameters. following you original approach of creating a factory that creates service instances; i modified the factory function that returns a function which takes endPoint as parameter, and that function creates instances with unique endPoints.

{
    provide: ApiService, useFactory:
      (someOtherService: SomeOtherService) => {
        return (endPoint: string) => {
          return new ApiService(endPoint, someOtherService);
        }
      }, deps: [SomeOtherService /** this is just an example to show how to inject other dependencies*/]
}

and use it as follows in component

export class Component1Component {
  apiService1 = this.apiFactory<string>("end.point.1");
  apiService2 = this.apiFactory<number>("end.point.2");

  constructor(@Inject(ApiService) private apiFactory: <T>(endPoint: string) => ApiService<T>) {}
}

here is a working demo https://stackblitz.com/edit/angular-6kmy8w

ps. i got the idea from this post. i improved typing and incorporated changes for making the service generic