尝试向angular组件注入服务时出错“EXCEPTION: Can't resolve all parameters for component”，为什么?

在我的例子中，将错误的参数传递给构造函数会产生这个错误，关于这个错误的基本思想是，你在不知不觉中传递了一些错误的参数给任何函数。

export class ProductComponent {
productList: Array<Product>;


constructor(productList:Product) {
// productList:Product this arg was causing error of unresolved parameters.
this.productList = [];
}
}

我通过去掉这个参数来解决这个问题。

对我来说，这是因为我停止使用-aot标志，同时试图使编译时间更快。

 ng serve -aot

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

假设你有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) {}
}

对我来说，这是因为我的@Component装饰器和Component类之间有一个空行。这导致装饰器没有应用到类中。

另一种可能是在tsconfig.json中没有将emitDecoratorMetadata设置为true

{
"compilerOptions": {


...


"emitDecoratorMetadata": true,


...


}


}

在我的例子中，我从同一个组件文件中导出了一个类和一个Enum:

mComponent.component.ts:

export class MyComponentClass{...}
export enum MyEnum{...}

然后，我试图从MyComponentClass的子对象中使用MyEnum。这导致不能解决所有参数错误。

通过移动MyEnum在一个单独的文件夹从MyComponentClass，这解决了我的问题!

正如Günter Zöchbauer提到的，这是因为服务或组件是循环依赖的。

在我的例子中，我需要将import "core-js/es7/reflect";添加到我的应用程序中，以使@Injectable工作。

对我来说，这只是@Injectable缺少()。正确的是@Injectable()

在我的情况下，这是因为插件Augury，禁用它将工作得很好。替代选项是aot，也工作。

所有功劳都归功于@Boboss74，他在这里发布了答案:https://github.com/angular/angular/issues/23958

对我来说，当我在腻子中< em >错误地禁用< / em >这个导入时，我得到了这个错误。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';

在我的例子中，我对一个没有依赖关系的服务进行了依赖，因此我没有向服务类添加constructor()函数。我向依赖的服务类添加了一个无参数构造函数，一切都开始工作了。

在我的情况下，我试图扩展“NativeDateAdapter”，以覆盖“format(date: Date, displayFormat: Object)”方法。

在AngularMaterial-2 DatePicker中。

所以基本上我忘记添加@Injectable表示法。

在我把这个添加到我的“CustomDateAdapter”类后:

@Injectable({
providedIn: 'root'
})

错误已经消失了。

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

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

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

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

不太好:(

就我而言，原因如下:

• 我的可注入服务A扩展了另一类B
• B有一个需要参数的构造函数
• 我没有在A中定义任何构造函数

因此，在尝试创建对象a时，默认构造函数失败了。我不知道为什么这不是一个编译错误。

我通过在a中添加一个构造函数来解决这个问题，它正确地调用了B的构造函数。

这个答案可能对这个问题很有帮助。此外，在我的例子中，将服务导出为default是原因。

错误的:

@Inject()
export default class MobileService { ... }

正确的:

@Inject()
export class MobileService { ... }

由于错误中缺乏反馈，这可能是一个非常难以调试的问题。如果你关心一个实际的循环依赖，这里是在堆栈跟踪中最重要的东西:a)服务的名称;b)该服务中带有问号的构造函数参数，例如，如果它看起来像这样:

不能解析AuthService的所有参数:([object object]， [object object]， [object object]， [object object]， ?)

那么它意味着第五个参数也是一个依赖于AuthService的服务。即问号，表示未被DI解决。

从这里开始，您只需要通过重新构造代码来解耦这两个服务。

明白了!

如果以上答案都对你没有帮助，也许你正在从同一个文件导入某个元素，其中组件正在注入服务。

我解释得更好:

这是服务文件:

// 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');
}

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

在我的例子中，这是我升级到主版本的TypeScript版本，以及我添加到一些Class属性中的赋值断言。

恢复更改为我解决了这个问题。(细节)

对我来说，停止应用程序并发出ng服务解决了这个问题

在我的例子中，我错过了调用我继承的类的构造函数。

之前:

@Component({ ... })
export class ComponentA extends ComponentParent {
// ...
}

后:

@Component({ ... })
export class ComponentA extends ComponentParent {
constructor(protected route: ActivatedRoute, protected store$: Store<AppState>) {
super(route, store$);
}
// ...
}

在我的情况下修复是替换相对路径与绝对 在< / p >

import {Service} from './service';

后

import {Service} from 'src/app/services/service';

看起来是typescript/angular的问题

您可以重试执行如下命令:

ng serve --open

在可能的情况下，错误是由升级@angular-devkit/build-angular到~0.803.*引起的。详细信息见https://github.com/angular/angular-cli/issues/15892。

对于angular 6和更新的版本，请尝试

@Injectable({
providedIn: 'root'
})

．．就在你的服务等级上面，中间没有其他线

优势

• 不需要将服务添加到任何模块(将“自动发现”)
• 服务将是一个单例(因为它将被注入根目录)

(角文档)

导入路径是区分大小写的。检查您使用服务的所有地方的服务路径是否正确，并检查所有地方的字母大小写是否正确且相同。

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

的地方:

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
) {}

我的情况，添加"emitDecoratorMetadata"和“;esModuleInterop"解决了问题。

https://github.com/thymikee/jest-preset-angular/issues/288

添加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 {

问题是模块中的元素对于属于同一模块的元素应该使用相对进口;它们永远不应该通过模块的公共API桶(或一般的桶)导入。

该导入的问题是，如果依赖于服务的某些东西首先在桶中加载(直接或不直接)，那么DI系统将失败，因为服务还没有声明，因此无法解决。

尝试从绝对更改导入:

import { UserService } from 'src/app/users/user.service';

相对:

import { UserService } from '../../users/user.service';

我试了这里给出的几乎所有答案，但没有一个对我有帮助。

对我有用的是在Visual Studio Code中关闭项目，打开文件资源管理器，进入我的项目并删除dist文件夹。

然后我对所有库进行了每个构建，然后在npm start中重新运行项目。