[解決済み】アンギュラーコンポーネントにサービスを注入しようとするとエラー "EXCEPTION: Can't resolve all parameters for component"、なぜ？

質問

Angularで基本的なアプリを作りましたが、あるコンポーネントにサービスをインジェクトできないという奇妙な問題が発生しました。しかし、私が作成した他の3つのコンポーネントのいずれにも問題なく注入されます。

手始めに、これがそのサービスです。

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;
  }
  
}

そして、動作を拒否しているコンポーネント。

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);
  }

}

ブラウザのコンソールに表示されるエラーはこれです。

EXCEPTION: HeaderComponent のすべてのパラメーターを解決できません。(?).

ブートストラップ関数の中にサービスがあるので、プロバイダがあります。そして、他のコンポーネントのコンストラクタに問題なく注入することができるようです。

どうすればいいですか？

バレルではなく、宣言されているファイルから直接インポートしてください。

具体的な原因はわかりませんが、何度か言及されているのを見ました（おそらく何らかの循環型依存関係）。

また、バレル内のエクスポートの順序を変更することで修正可能なはずです（詳細はわかりませんが、同様に言及されています）。