Estoy escribiendo una extensión de navegador que tiene diferentes servicios para Firefox y Chrome. Se debe inyectar la versión adecuada de cada servicio según la variable de entorno. Si bien puedo inyectar correctamente el servicio apropiado en AppModule, no estoy seguro de cómo obtener los servicios adecuados en mi componente raíz sin una solución alternativa.

aplicación.módulo.ts

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './index'; import { environment } from '../environments/environment'; import { MessageService } from './messaging.service'; import { MessageServiceFirefox } from './ff.messaging.service'; import { ScreenshotService } from './screenshot.service'; import { ScreenshotServiceFirefox } from './ff.screenshot.service'; export function screenshotFactory() { if (environment.envName == 'prod-ff' || environment.envName == 'ff') { return new ScreenshotServiceFirefox(); } else { return new ScreenshotService(); } } export function messageFactory() { if (environment.envName == 'prod-ff' || environment.envName == 'ff') { return new MessageServiceFirefox(); } else { return new MessageService(); } } @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ], providers: [ { provide: ScreenshotService, useFactory: screenshotFactory }, { provide: MessageService, useFactory: messageFactory } ], bootstrap: [AppComponent] }) export class AppModule { }

aplicación.componente.ts

 import { Component } from '@angular/core'; import { ScreenshotService } from './screenshot.service'; import { MessageService } from './messaging.service'; // Would need to import ScreenshotServiceFirefox and MessageServiceFirefox // and have conditional logic to establish correct ScreenshotService and MessageService @Component({ moduleId: module.id, selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [ScreenshotService, MessageService] }) export class AppComponent { constructor(private screenshotService: ScreenshotService, private messageService: MessageService) {} takeScreenshot (){ this.messageService.injectScript() .then(this.screenshotService.takeScreenshot) .then(this.screenshotService.convertToBlob) .then(this.screenshotService.downloadLocally) } }

También intenté usar soluciones aquí , aquí y aquí , pero ninguna se ocupa del acceso al servicio inyectado desde el componente raíz sin usar la misma lógica condicional.

Estoy abierto a sugerencias de otras formas de lograr esto.