当试图将一个服务注入到一个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函数中有服务，所以它有一个提供者。而且我似乎能够将它注入到任何其他组件的构造函数中而没有任何问题。

当前回答

添加Injectable解决了我的问题:

错误代码

import { Observable } from 'rxjs';
import { io } from 'socket.io-client';
import { HttpClient } from '@angular/common/http';

export class Chat {

修复后

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { io } from 'socket.io-client';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class Chat {

2021-08-06 05:51:59

其他回答

为了搜索者的利益;我得到了这个错误。这只是一个丢失的@符号。

也就是说，这会产生无法解析MyHttpService的所有参数的错误。

Injectable()
export class MyHttpService{
}

添加缺少的@符号可以修复它。

@Injectable()
export class MyHttpService{
}

2017-02-15 16:00:21

当你在app.module.js中声明Angular的内置模块(HttpClientModule, HttpErrorResponse等)时，有时会发生这种情况。我也遇到过同样的问题，但现在解决了。

我犯的错误是提到HttpClientModule into Providers而不是Import of angular Module

2017-09-14 00:41:31

如果你试图注入一个接口，也会发生这个错误:

的地方:

export const MY_SERVICE = new InjectionToken<MyService>('MY_SERVICE');

export interface MyService {
  // ...
}

@Injectable()
export class MyServiceImpl implements MyService {
  // ...
}

不正确的:

  constructor(
    private myService: MyService
  ) {}

正确的:

  constructor(
    @Inject(MY_SERVICE) private myService: MyService
  ) {}

2020-06-25 18:05:50

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

2017-01-24 16:03:09

明白了!

如果以上答案都对您没有帮助，那么您可能正在从组件注入服务的同一个文件中导入某个元素。

我解释得更好:

这是服务文件:

// your-service-file.ts
import { helloWorld } from 'your-component-file.ts'

@Injectable()
export class CustomService() {
  helloWorld()
}

这是组件文件:

@Component({..})
export class CustomComponent {
  constructor(service: CustomService) { }
}

export function helloWorld() {
  console.log('hello world');
}

因此，即使符号不在同一个组件中，而只是在同一个文件中，也会引起问题。将符号(可以是函数、常量、类等等)移动到其他地方，错误就会消失

2019-05-24 13:43:22

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

推荐文章

最新文章

标签