Как получить доступ к динамически внедренному сервису в корневом компоненте - Angular 2

Я пишу расширение для браузера, которое имеет разные службы для Firefox и Chrome. В зависимости от переменной среды необходимо внедрить правильную версию каждой службы. Хотя я могу правильно внедрить соответствующую службу в AppModule, я не уверен, как получить нужные службы в моем корневом компоненте без обходного пути.

app.module.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 { }

app.component.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)
  }
}

Я также пытался использовать решения здесь, здесь и здесь, но ни один из них не связан с доступом к внедренному сервису из корневого компонента без использования той же условной логики.

Я открыт для предложений других способов добиться этого.