当试图将一个服务注入到一个angular组件中时出现错误:"EXCEPTION: Can't resolve all parameters for component"，为什么?

我已经用Angular构建了一个基本的应用程序，但是我遇到了一个奇怪的问题，我不能将服务注入到我的一个组件中。但是，它可以很好地注入我创建的其他三个组件。

对于初学者来说，这是服务:

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

@Injectable()
export class MobileService {
  screenWidth: number;
  screenHeight: number;

  constructor() {
    this.screenWidth = window.outerWidth;
    this.screenHeight = window.outerHeight;

    window.addEventListener("resize", this.onWindowResize.bind(this) )
  }
  
  onWindowResize(ev: Event) {
    var win = (ev.currentTarget as Window);
    this.screenWidth = win.outerWidth;
    this.screenHeight = win.outerHeight;
  }
  
}

以及它拒绝使用的组件:

import { Component, } from '@angular/core';
import { NgClass } from '@angular/common';
import { ROUTER_DIRECTIVES } from '@angular/router';

import {MobileService} from '../';

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
})
export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(public ms: MobileService) {
    console.log(ms);
  }

}

我在浏览器控制台得到的错误是这样的:

EXCEPTION:不能解析HeaderComponent:(?)的所有参数。

我在bootstrap函数中有服务，所以它有一个提供者。而且我似乎能够将它注入到任何其他组件的构造函数中而没有任何问题。

当前回答

如果服务A依赖于服务B的静态属性/方法，而服务B本身依赖于服务A的槽依赖注入，则会出现此错误。所以这是一种循环依赖，尽管它不是，因为属性/方法是静态的。可能是与AOT一起出现的错误。

2017-04-26 14:01:03

其他回答

虽然已经提到了从桶中导出类的排序，但下面的场景也可能产生相同的效果。

假设你有类A, B和C从同一个文件中导出，其中A依赖于B和C:

@Injectable()
export class A {
    /** dependencies injected */
    constructor(private b: B, private c: C) {}
}

@Injectable()
export class B {...}

@Injectable()
export class C {...}

因为Angular还不知道依赖类(比如类B和C)，(可能是在运行时Angular对类A的依赖注入过程中)就会引发这个错误。

解决方案

解决方案是在执行DI的类之前声明和导出依赖类。

例如，在上面的例子中，类A是在它的依赖关系定义之后声明的:

@Injectable()
export class B {...}

@Injectable()
export class C {...}

@Injectable()
export class A {
    /** dependencies injected */
    constructor(private b: B, private c: C) {}
}

2018-02-22 10:49:51

如果您的服务与使用它的组件定义在同一个文件中，并且服务定义在文件中的组件之后，您可能会得到此错误。这是由于其他人提到的相同的“forward dref”问题。此时，VSCode并不能很好地向您显示这个错误，并且构建编译成功。

由于编译器的工作方式(可能与树摇晃有关)，使用——aot运行构建可以掩盖这个问题。

解决方案:确保在另一个文件中或在组件定义之前定义服务。(我不确定在这种情况下是否可以使用forwardRef，但这样做似乎很笨拙)。

如果我有一个非常简单的服务，它与组件紧密地绑定在一起(有点像视图模型)。ImageCarouselComponent，我可以把它命名为ImageCarouselComponent。service。ts这样它就不会和其他服务混在一起。

2018-07-21 23:14:25

在我的情况下，我需要添加导入“core-js/es7/reflect”;到我的应用程序使@Injectable工作。

2018-05-15 19:28:54

对我来说，当我错误地在填充中禁用此导入时，我得到了这个错误。Ts文件，您需要确保它被导入以避免该错误。

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

2018-05-29 13:01:44

对我来说，这个问题甚至更烦人，我正在使用服务中的服务，忘记在appModule中添加它作为依赖项! 希望这能帮助一些人节省几个小时的应用程序分解，只是重新建立它

2017-01-24 16:03:09

当试图将一个服务注入到一个angular组件中时出现错误:"EXCEPTION: Can't resolve all parameters for component"，为什么?

推荐文章

最新文章

标签