Angular2 DI-Fehler im Jasmin-Test

Question

Ich schreibe einige angular2-Unit-Tests mit Jasmin und arbeite an einem Komponententest. Wenn ich versuche, die Komponente unter Verwendung der TestBed-Klasse zu instanziieren, erhalte ich einen Abhängigkeitsinjektionsfehler.

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

Die Linie

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

gibt den folgenden Fehler:

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)

Ich habe die LoginComponent erklärt zusammen mit seiner eigenen Abhängigkeit, LoginService.

Irgendwelche Ideen über was ist los?

Answer 1

Okay, ich habe es herausgefunden, irgendwie. Anscheinend ist das Problem hat mit der providers Erklärung in LoginComponent zu tun:

providers: [LoginService] 

Sobald ich, dass die Dinge aus LoginComponent bewegt und in AppModule, zu arbeiten begann. Wäre interessiert zu wissen, warum der Test nicht damit in der Komponente selbst erklärt.