Angular 2 - 无法解析组件的所有参数：（？）答案

【问题标题】：Angular 2 - Can't resolve all parameters for component: (?)Angular 2 - 无法解析组件的所有参数：（？）
【发布时间】：2017-04-24 01:14:59
【问题描述】：

我启动了一个 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 ...）不是问题

【问题讨论】：

我怀疑导入或项目配置有问题，而不是代码。
通过这个但它可能是什么？你想要一个特定的文件吗？ Ps : 当我没有在构造函数中添加任何参数时，它工作正常。
抱歉，不知道。我自己没用过TS，不了解项目配置。
这是指向正确的文件吗？ import { AuthService } from '../services/auth.service';
@Hareesh 是的，我的 HomeController 所在的控制器目录与“服务”目录位于同一文件夹中。

标签： angular dependency-injection components

【解决方案1】：

确保你有

"emitDecoratorMetadata": true,

在您的tsconfig.js 中。如果已启用，则无需将 @Inject() 添加到函数参数中。

【讨论】：

我在使用 Angular 5 开发 SharePoint SPFx 解决方案时遇到了这个问题。这节省了我的时间。谢谢
真正的救星！

【解决方案2】：

导入这个

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

并将你的构造函数更改为

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

}

您应该在使用之前将任何服务@Inject 到构造函数中。

你的服务应该是可注入的

@Injectable()
export class AuthService {

}

【讨论】：

我在使用一个我没有创建的抽象类时弹出了这个模糊的错误消息@Injectable。添加@Injectable 为我修复了它。

【解决方案3】：

我的问题最终没有了。我只是重新启动了 webpack watcher，然后一切都很好。作为参考，我使用的是 Angular CLI。

【讨论】：

不知道为什么，但事实证明这也是我的问题......首先让我有点冷汗，因为我就像“那应该可以工作.. wtf..”

【解决方案4】：

对我来说引发此错误的问题完全不同。我在服务中错误地使用了组件中的日志记录类别，因此服务依赖于组件，无法及时创建以将其注入组件。

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

【讨论】：