17

在我的 Angular 9 应用程序中，我有一个抽象类：

export abstract class MyAbstractComponent {
  constructor(
    protected readonly cd: ChangeDetectorRef,
  ) {
    super();
  }

  // ...
}

和一个扩展它的组件：

@Component({
  // ...
})
export class MyConcreteComponent extends MyAbstractComponent {
  // ...
}

一切正常，除了测试，我得到以下错误：

错误：此构造函数与 Angular 依赖注入不兼容，因为它在参数列表索引 0 处的依赖无效。如果依赖类型是像字符串这样的原始类型，或者如果此类的祖先缺少 Angular 装饰器，则可能会发生这种情况。

请检查 1) 索引 0 处的参数类型是否正确，以及 2) 为此类及其祖先定义了正确的 Angular 装饰器。

4

10 回答 10

13

我们在迁移到版本 9 时遇到了同样的问题。最后我们发现我们忘记为一些抽象组件添加装饰器。从 v9 开始，所有使用 Angular DI 的类都必须具有 Angular 类级别的装饰器。

常春藤兼容性示例中的示例：

前：

export class DataService {
  constructor(@Inject('CONFIG') public config: DataConfig) {}
}

@Injectable()
export class AppService extends DataService {...}

后：

@Injectable() // <--- THIS
export class DataService {
  constructor(@Inject('CONFIG') public config: DataConfig) {}
}

@Injectable()
export class AppService extends DataService {...}
于 2020-03-27T12:45:45.877 回答
12

花了我一段时间，但是在使用 angular 10.2.3 创建一个新应用程序后，我的基础 tsconfig.json 没有

"emitDecoratorMetadata": true,

在编译器选项中！

再次将其添加到 后tsconfig.json，DI 按预期工作。

于 2020-11-12T06:13:35.743 回答
7

我通过添加构造函数MyConcreteComponent并调用super(...)构造函数解决了我的问题：

@Component({
  // ...
})
export class MyConcreteComponent extends MyAbstractComponent {

  // adding this block fixed my issue
  constructor(
    protected readonly cd: ChangeDetectorRef,
  ) {
    super(cd);
  }

  // ...
}
于 2020-02-10T11:04:58.147 回答
6

在我的情况下，简单的重启 npm 修复了这个错误。

于 2020-03-26T04:33:47.757 回答
3

在我的情况下，它发生是因为我在 git 存储库 A 并移动到另一个 git 存储库（B）并且存储库 A 中存在的一些服务不再在 B 上。所以，通过简单地重新启动 npm，这个错误消失了。希望它适用于其他人。

于 2021-04-24T06:41:31.780 回答
1

今天，当我使用 Jest 在我的应用程序中执行测试时，我不得不面对这个确切的错误。运行 Angular 10.2，我有另一个规范文件正在执行完全相同的测试而没有抛出任何错误。每个班级都有装饰师。我花了一个小时才发现问题：我的测试文件中有一个循环依赖，我没有注意到它，因为测试没有显示通常的 Angular 警告。

所以只是为了向其他遇到同样问题的人指出，检查你的进口！

于 2020-10-29T21:37:37.383 回答
1

import当我无意中将语句更改为语句时，我得到了接近此错误消息的内容（“错误：此构造函数与依赖注入不兼容。”）import type：

错误的

import type { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore'

@Injectable({
  providedIn: 'root'
})
export class CommentsApiService {

  constructor(
    private firestore: AngularFirestore
  ) { }

  // ...
}

正确的

import { AngularFirestore } from '@angular/fire/firestore'
import type { AngularFirestoreDocument } from '@angular/fire/firestore'

@Injectable({
  providedIn: 'root'
})
export class CommentsApiService {

  constructor(
    private firestore: AngularFirestore
  ) { }

  // ...
}
于 2020-11-16T21:13:07.060 回答
0

就我而言，我有一个 di 容器无法识别的构造函数参数。我将其标记为可选，这足以让它忽略它：

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

constructor(protected coolService: CoolService, @Optional() private name: string) {...
于 2021-02-23T18:56:16.770 回答
0

只是为了向这个问题添加额外的信息，这个错误发生在我身上，类似于下面的例子。

import * as fromOtherLib from 'fromOtherLib';

@Component({
...
})
class ExampleComponent {
  constructor(private exampleService: fromOtherLib.ExampleService){}
}

所以我删除了这* as fromOtherLib部分，并用一个像这样的解构导入替换它import { exampleService } from 'fromOtherLib'；

于 2021-09-29T23:45:19.087 回答
0

在我的确切情况下（在 angular9 中），通过将 private访问器添加到构造函数参数..

于 2020-08-16T17:26:03.203 回答