ジャスミンテストでAngular2 DIエラーが発生しました

Question

ジャスミンを使用し、コンポーネントの単体テストに取り組んでいるangular2単体テストをいくつか書いています。何らかの理由で、TestBedクラスを使用してコンポーネントをインスタンス化しようとすると、依存性注入エラーが発生します。

LoginComponent：

import { Component } from '@angular/core'; 
import { LoginService } from './login.service'; 

@Component({ 
    selector: 'login', 
    template: require('./login.template.pug'), 
    styles: [require('./style.scss')], 
    providers: [LoginService] 
}) 
export class LoginComponent { 
    public username: string; 
    public password: string; 

    constructor(private loginService: LoginService) { 
    } 

    public login(username, password) { 
     this.loginService.login(username, password) 
      .then((token: string) => { 
      }) 
    } 
} 

LoginComponentTest：

import { TestBed, inject, async, ComponentFixture } from '@angular/core/testing'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { LoginComponent } from './login.component'; 
import { LoginService } from './login.service'; 
import { BrowserModule } from '@angular/platform-browser'; 


describe('LoginComponent',() => { 

    class MockClass { 
     get(url): Promise<any> { 
      throw Error('not implemented'); 
     }; 
    } 

    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ 
       LoginComponent 
      ], 

      providers: [ 
       LoginComponent, 
       { provide: LoginService, useClass: MockClass }, 
      ], 

      imports: [ 
       FormsModule, 
       BrowserModule, 
       ReactiveFormsModule 
      ] 
     }) 
    })); 


    it('will let user login', async(() => { 
     TestBed.compileComponents() 
      .then(() => { 
       let fixture: ComponentFixture<LoginComponent> = TestBed.createComponent(LoginComponent); 
      }); 
    })); 
}); 

ライン

let fixture: ComponentFixture<LoginComponent> = TestBed.createComponent(LoginComponent); 

は、次のエラーを与える：

Chrome 57.0.2987 (Mac OS X 10.12.3) LoginComponent will let user login FAILED Error: DI Error at NoProviderError.ZoneAwareError (webpack:///~/zone.js/dist/zone.js:958:0 <- config/spec-bundle.js:75553:33)

私はLoginComponentとそれ自身の依存関係を宣言しました。LoginServiceです。

何が起こっているかについてのアイデアはありますか？

Answer 1

さて、私はそれを考え出しました。どうやら問題はLoginComponentにproviders宣言で行うことがあります。

providers: [LoginService] 

私はLoginComponentから出てAppModuleに、物事が仕事を始めたことを移動したら。コンポーネント自体の内部で宣言されたテストが動作しない理由を知りたいと思うでしょうか。