Angular - choose class to inject based on URL / logic available at bootstrap

Question

(How) is it possible to configure injectors to use a class based on some data available at bootstrap?

I have two implementations for interfacing with the backend, (for simplicity, let's say over http and over websockets).

I created two service classes, backend.http.service and backend.websocket.service. They both extend the backend.service class, so their interface is common.

I'd like my components to inject backend.service, and be ignorant of which actual interface is in use.

Hardwiring one of the services works like this:

      {
        provide: BackendService,
        useClass: WebsocketBackendService,
      },

However I'd like to do something like:

      {
        provide: BackendService,
        useClass: should_i_use_websockets() ? WebsocketBackendService : HttpBackendService,
      },

My first guess was to use useFactory instead (which means I could actually DI some services to calculate which backend to use), but then how would I instantiate the services themselves? Would the factory need to know the exact dependencies of the concrete serivces? That doesn't seem like a nice solution.

        {
        provide: BackendService,
        useFactory: (s: ServiceToDetermineWebsocketAvailability) => {
          if (s.should_i_use_websockets()) {
            return WebsocketBackendService(???);
          } else {
            return HttpBackendService(???);
          }
        }


@Injectable({ providedIn: 'root'})
export abstract class BackendService {
  connected$: Observable<boolean>;
  events$: Observable<MyEvent>;
  foo(): boolean
}

export class HttpBackendService {
  connected$ = ...;
  events$ = ...;
  foo(): boolean { return true; }

  constructor(http: HttpService) { ... }
}

export class WebsocketBackendService {
  connected$ =  ...;
  events$ = ...;
  foo(): boolean { return false; }

  constructor(websocket: WsService) { ... }
}

You want to choose a service on the app bootstrap or at any route? — Anton Marinenko, Mar 16 '23 at 20:06
Just bootstrap. I just figured it out though, writing an answer right now, please take a look what you think. — Ákos Vandra-Meyer, Mar 16 '23 at 20:07

Ákos Vandra-Meyer · Accepted Answer · 2023-03-16T20:26:40.553

I figured it out like this. This means that the concrete services need to be annotated as well, but they do not need to be made available in the root injector, so as to avoid accidentally injecting the concrete instances instead of the abstract interface.

      {
        provide: BackendService,
        useFactory: ((rootInjector: Injector) => {
          const injector = Injector.create({
            parent: rootInjector,
            providers: [
              { provide: HttpBackendService, useClass: HttpBackendService },
              { provide: WebsocketBackendService, useClass: WebsocketBackendService },
            ]
          });

          if (should_i_use_websockets()) {
            return injector.get(WebsocketBackendService);
          } else {
            return injector.get(HttpBackendService);
          }
        }),
        deps: [Injector]
      },

score 0 · Answer 2 · answered Mar 16 '23 at 20:40

0

I think hooking into the bootstrap process is a solution.

in your app module you implement the DoBootstrap interface as following

export class AppModule implements DoBootstrap {

    //.....
    ngDoBootstrap() {

        let service: BackendService = should_i_use_websockets() ? new WebsocketBackendService() : new HttpBackendService();
        newLocal.injector.provide({
            provide: BackendService, useValue: service
        });
    }
}

answered Mar 16 '23 at 20:40

Mohmaed Taoufik Baccar

1

This means I can't use DI for instantiating the concrete backends though. – Ákos Vandra-Meyer Mar 17 '23 at 19:51

Angular - choose class to inject based on URL / logic available at bootstrap

2 Answers2