Angular 2 - 无法解析组件的所有参数:(?)

时间:2016-12-08 17:36:53

标签: angular dependency-injection components

我开始使用Angular2应用程序,自从几天起我就遇到了问题!

Can't resolve all parameters for HomeComponent: (?).(…) 

但是我的问题不在于特定的提供者:我尝试在HomeComponent构造函数中注入的每一个都会返回该错误。没有关于错误的类似问题解决了我的情况,现在我花了很多时间寻找这个我无法找到它。

App.moodule.ts:

  import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouterModule }   from '@angular/router';
  import { SimpleNotificationsModule } from 'angular2-notifications';

  // Controllers
  import { AppComponent }  from './app.component';
  import { HomeComponent }  from './components/home.component';

  // Service
  import { AuthService } from './services/auth.service';

  // Guards
  import { AuthGuard } from './guards/auth.guard';

  @NgModule({
    imports: [ 
        BrowserModule,
        RouterModule.forRoot([
        {
          path: '',
          component: HomeComponent,
          canActivate: [AuthGuard]
        }
      ]),
      SimpleNotificationsModule
    ],
    declarations: [ 
        AppComponent,
        HomeComponent
    ],
    providers: [
        AuthGuard,
      AuthService,
    ],
    bootstrap: [ AppComponent ]
  })

  export class AppModule { }

我的主页成员:

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

import { NotificationsService } from 'angular2-notifications';

import { AuthService } from '../services/auth.service';

@Component({
    selector: 'home',
    templateUrl: '/templates/home.html'
})

export class HomeComponent implements OnInit 
{
    public test: boolean = false;

    constructor( 
        private _authService: AuthService
    ) {}

    ngOnInit()
    {
        this.test = true;
    }
}

我尝试导入的AuthService是空的,正如我所说,我在HomeComponent中注入的每个提供程序都返回该错误。每个构造函数参数在错误中创建一个新问号。如果您需要更多代码,请告诉我,但我不认为其余的(模板,systemjs.config.js ...)是问题

4 个答案:

答案 0 :(得分:9)

确保你有

.MCC: 268
. MNC: 06
.LAC: 8280
.CELL ID: 5616

"emitDecoratorMetadata": true, 中。如果已启用,则不需要将tsconfig.js添加到函数参数中。

答案 1 :(得分:6)

导入此

import {Inject} from '@angular/core';

将构造函数更改为

constructor(@Inject(AuthService) _authService: AuthService) 
{

}

你应该在使用它之前@Inject任何服务到构造函数。

并且您的服务应该是可注射的

@Injectable()
export class AuthService {

}

答案 2 :(得分:3)

我的问题最终没有成功。我只是重新启动了webpack观察者,然后一切都很好。作为参考,我正在使用Angular CLI。

答案 3 :(得分:0)

给我带来这个错误的问题完全不同。我在服务中错误地使用了组件中的日志记录类别,因此服务依赖于组件,并且无法及时创建它以将其注入组件。

TL; DR:检查无法注入的服务上的导入。