Criei um aplicativo básico no Angular, mas encontrei um problema estranho no qual não posso injetar um serviço em um dos meus componentes. Ele injeta bem em qualquer um dos outros três componentes que eu criei.

Para iniciantes, este é o serviço:

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

@Injectable()
export class MobileService {
  screenWidth: number;
  screenHeight: number;

  constructor() {
    this.screenWidth = window.outerWidth;
    this.screenHeight = window.outerHeight;

    window.addEventListener("resize", this.onWindowResize.bind(this) )
  }

  onWindowResize(ev: Event) {
    var win = (ev.currentTarget as Window);
    this.screenWidth = win.outerWidth;
    this.screenHeight = win.outerHeight;
  }

}

E o componente com o qual se recusa a trabalhar:

import { Component, } from '@angular/core';
import { NgClass } from '@angular/common';
import { ROUTER_DIRECTIVES } from '@angular/router';

import {MobileService} from '../';

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
})
export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(public ms: MobileService) {
    console.log(ms);
  }

}

O erro que recebo no console do navegador é o seguinte:

EXCEÇÃO: Não é possível resolver todos os parâmetros para HeaderComponent: (?).

Eu tenho o serviço na função de inicialização, para que ele tenha um provedor. E eu pareço capaz de injetá-lo no construtor de qualquer um dos meus outros componentes sem problemas.