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

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 2

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.