This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid

Question

In my Angular 9 app, I have an abstract class:

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

  // ...
}

and a Component extending it:

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

Everything works fine except the tests, where I get the following error:

Error: This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid. This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.

Please check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.

Answer 1

Took me a while, but after creating a new application with angular 10.2.3 my base tsconfig.json did not have the

"emitDecoratorMetadata": true,

in the compilerOptions!

After adding that again to the tsconfig.json, DI worked as expected.

Answer 2

We faced the same issue when migrating to version 9. At the end we found out we forgot to add decorators to some abstract components. As of v9 all classes that uses Angular DI must have an Angular class-level decorator.

Example from Ivy compatibility examples:

Before:

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

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

After:

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

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

Answer 3

I've resolved my issue by adding the constructor in MyConcreteComponent and calling the super(...) constructor:

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

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

  // ...
}

Answer 4

In my case simple restarting npm fixed this error.

Answer 5

Today I had to face this exact error while performing tests in my app using Jest. Running Angular 10.2, I had another spec file that was performing the exact same test without throwing any error. Every class had the decorators. Took me an hour to find out the problem: I had a circular dependency in my test file, and I didn't notice it since tests were not displaying usual Angular warning.

So just to point out to somebody else that stumble in the same problem, check your imports!

Answer 6

In my case it happened because I was in git repository A and moved to another git repository (B) and some services which existed in repository A was no longer on B. so, by simple restarting npm this error disappeared. Hope it works for others.

Answer 7

Just to add additional info to this question, this error occurred for me similar to the following example.

import * as fromOtherLib from 'fromOtherLib';

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

So I removed the * as fromOtherLib part and I replaced it with a destructured import like import { exampleService } from 'fromOtherLib';

Answer 8

I got something close to this error message ("Error: This constructor was not compatible with Dependency Injection.") when I inadvertently changed an import statement to an import type statement:

WRONG

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

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

  constructor(
    private firestore: AngularFirestore
  ) { }

  // ...
}

CORRECT

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

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

  constructor(
    private firestore: AngularFirestore
  ) { }

  // ...
}

Answer 9

in my exact case(in angular9), By adding private accessor to the constructor parameter..

Answer 10

In my case I had a constructor argument that the di container didn't recognize. I marked it optional which was good enough for it to ignore it:

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

constructor(protected coolService: CoolService, @Optional() private name: string) {...

Answer 11

This cryptic error can be caused by wrong order of multiple dependent services within the same file.

e.g.

@Injectable()
export class ServiceB {
  constructor(serviceA: ServiceA) {}
}

@Injectable()
export class ServiceA {
  constructor() {}
}

Reversing the order fixes the issue:

@Injectable()
export class ServiceA {
  constructor() {}
}

@Injectable()
export class ServiceB {
  constructor(serviceA: ServiceA) {}
}

That said, you should rather keep to one-service-per-file pattern to avoid such issues.

Answer 12

Using ng-mocks and jest, encountered same error. Checked for circular dependencies as @Dario Vogogna suggested. I had paths in tsconfig modified, and files used them in relative and absolute manner, so I changed related imports to these exact paths, and changed order in constructor. It could be cache, but I removed everything except source files twice.

TL;DR: Reorder injections in constructor, rename your imports to follow paths in tsconfig accordingly in every imported file.

Answer 13

Big PAIN in the rear.

I forgot the @Inject(ElementRef) attribute in my Directive constructor parameter and it started giving me this error.

Wrong

constructor (private ElementRef : element)

Correct

constructor (@Inject(ElementRef) private ElementRef : element)