Angular2 DI error in jasmine test - unit-testing

Question

I'm writing some angular2 unit tests using jasmine and working on a unit test for a component. For some reason, when I try to instantiate the component using the TestBed class, I get a dependency injection error.
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);
});
}));
});
The line
let fixture: ComponentFixture<LoginComponent> = TestBed.createComponent(LoginComponent);
gives the following error:
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)
I have the LoginComponent declared along with its own dependency, LoginService.
Any ideas about what's going on?

Answer 1

Okay, I figured it out, kind of. Apparently the issue has to do with the providers declaration in LoginComponent:
providers: [LoginService]
Once I moved that out of LoginComponent and into AppModule, things started working. Would be interested to know why the test doesn't work with it declared inside the component itself.