Lu4 Lu4 - 3 months ago 63
TypeScript Question

Angular 2 RC5 => RC6 migration causes Injector problems

I had an Angular2 RC5 application that was working perfectly, after upgrading to RC6 my application stops working with message:


Error: Can't resolve all parameters for LoginComponent: (?, ?).


I have fairly typical Angular2 setup, here is the code for
LoginComponent
, every injected parameter in constructor has
@Injectable()
annotation

import {AuthService} from "../../auth/auth-service";

import {ActivatedRoute, Router} from "@angular/router";
import {Component, Inject, OnInit} from '@angular/core';

@Component({
selector: 'login-component',
templateUrl: 'login/login.html',
styleUrls: ['login/login.css']
})
export class LoginComponent {
private model = {login: '', password: ''};

constructor(private authService: AuthService, private router: Router) {
}


protected doLogin(event: Event) {
this.authService.login(this.model.login, this.model.password).then(() => {
this.router.navigate(['/landing']);
});
}
}


Here is app-module:

import {NgModule} from '@angular/core';
import {HttpModule} from '@angular/http';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';

import {AppService} from './app-service'
import {AuthService} from "./auth/auth-service";
import {RouterModule} from '@angular/router';
import {AppComponent} from "./component/app-component";
import {ChessComponent} from './component/chess/chess-component';
import {LoginComponent} from "./component/login/login-component";
import {LandingComponent} from "./component/landing/landing-component";
import {AuthGuardService} from "./auth/auth-guard-service";
import {GuidService} from "./shared/guid-service";
import {EchoService} from "./io/echo-service";
import {PermissionsService} from "./permissions-service";
import {
EnumerateSetValuesPipe, EnumerateMapPipe, EnumerateMapKeysPipe, EnumerateMapValuesPipe,
EnumerateObjectPipe, EnumerateObjectKeysPipe, EnumerateObjectValuesPipe,
NeighbouringValuesPipe
} from "./shared/pipes";

import { TinyComponent } from "./component/tiny/tiny";
import {HtmlService} from "./component/docs/html-service";
import {DocsComponent} from "./component/docs/docs-component";

@NgModule({
imports: [
HttpModule,
FormsModule,
BrowserModule,
RouterModule.forRoot([{
path: '',
redirectTo: '/landing',
pathMatch: 'full'
}, {
path: 'login',
component: LoginComponent
}, {
path: 'docs',
component: DocsComponent,
canActivate: [AuthGuardService]
}, {
path: 'chess',
component: ChessComponent,
canActivate: [AuthGuardService]
}, {
path: 'landing',
component: LandingComponent,
}])
],
providers: [
AppService,
AuthService,
GuidService,
EchoService,
HtmlService,
AuthGuardService,
PermissionsService
],
declarations: [
AppComponent,
TinyComponent,
ChessComponent,
LoginComponent,
LandingComponent,

EnumerateSetValuesPipe,
EnumerateMapPipe,
EnumerateMapKeysPipe,
EnumerateMapValuesPipe,
EnumerateObjectPipe,
EnumerateObjectKeysPipe,
EnumerateObjectValuesPipe,
NeighbouringValuesPipe
],
bootstrap: [
AppComponent
]
})
export class AppModule {
public constructor() {

}
}


Not sure how to debug such problem... Any thoughts?

Lu4 Lu4
Answer

It was a problem with the way @Injector was declared, not sure how it worked previously but I had it declared this way @Injectable() instead of @Injectable.

When you decorate your class with @Injectable() call it annihilates decorator and this seems logical if you look into typescript specs.