Как разрешить зависимость во время выполнения в Angular4

Question

Я начинаю изучать внедрение зависимостей в angular4.Предположим, у меня есть два сервиса, как это

сервис a

export class BigService {

  constructor() { }


  print(){
    alert('big service');
  }
}

сервис b

 export class SmallService {

      constructor() { }


      print(){
        alert('small service');
      }
    }

сейчас, яхочу разрешить зависимость во время выполнения, скажем, я хочу вызвать небольшую службу, когда размер окна браузера <1000px, и большую службу, когда размер окна браузера> 1000px

, это мой компонент, в котором я пыталсяразрешить зависимость от нажатия кнопки

@Component({
  selector: 'app-parent-b',
  templateUrl: './parent-b.component.html',
 styles:[`
 <input type="button" value="submit" (click)='userButtonClick()'>
 `]
})
export class ParentBComponent implements OnInit {
  ngOnInit() {
  }


  userButtonClick(){
  this.useInjector();
  }


  useInjector(){
    const truthy=true;
    let injector=ReflectiveInjector.resolveAndCreate([
      {
        provide:'service',
        useFactory:()=>{
          if(truthy){
            return new SmallService();
          }else{
            return new BigService();
          }
        }
      }
      ])

      let _s=injector.get('service')
      _s.print();
  }


}

, но я не могу ее разрешить, и у меня появляется такая ошибка