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

Posted 2023-03-13

【中文标题】Angular 2 - 无法解析组件的所有参数：（？）

【英文标题】：Angular 2 - Can't resolve all parameters for component: (?)

【发布时间】：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 所在的控制器目录与“服务”目录位于同一文件夹中。

【参考方案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：检查无法注入的服务上的导入。