角度2 RC5 => RC6迁移导致注射器问题

时间:2016-09-05 12:44:13

标签: angular typescript

我有一个完美的Angular2 RC5应用程序,升级到RC6后,我的应用程序停止处理消息:

  

错误:无法解析LoginComponent的所有参数:(?,?)。

我有相当典型的Angular2设置,这里是LoginComponent的代码,构造函数中的每个注入参数都有@Injectable()注释

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

这是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() {

    }
}

不确定如何调试此类问题...有什么想法吗?

2 个答案:

答案 0 :(得分:2)

我的一个组件遇到了同样的问题。在另一个使用相同组件的应用程序中,没有这样的错误。因此,它必须与通过模块声明或应用的方式有关。

奇怪的是,如果未加载组件的源(文件路径错误),则会出现相同的错误。

答案 1 :(得分:0)

这是@Injector声明方式的问题,不知道它之前是如何工作的,但我已经用@Injectable而不是@Injectable()声明了它。

当你用@Injectable调用装饰你的类时,它会误解装饰者。