typescript - Este construtor não é compatível com a Injeção de Dependência do Angular porque sua dependência no índice 0 da lista de parâmetros é inválida

No meu aplicativo Angular 9, eu tenho uma classe abstrata:

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

  // ...
}

e um Componente estendendo-o:

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

Tudo funciona bem, exceto os testes, onde recebo o seguinte erro:

Erro: Este construtor não é compatível com Injeção de Dependência do Angular porque sua dependência no índice 0 da lista de parâmetros é inválida. Isso pode acontecer se o tipo de dependência for um primitivo, como uma string, ou se um ancestral desta classe estiver sem um decorador do Angular.

Por favor, verifique se 1) o tipo do parâmetro no índice 0 está correto e 2) os decoradores Angular corretos estão definidos para esta classe e seus ancestrais.

Resposta #1

Demorei um pouco, mas depois de criar um novo aplicativo com o Angular 10.2.3, meu tsconfig.json base não tinha o

"emitDecoratorMetadata": true,

nas compilerOptions!

Depois de adicionar isso novamente ao tsconfig.json, o DI funcionou como esperado.

Resposta #2

Enfrentamos o mesmo problema ao migrar para a versão 9. No final, descobrimos que esquecemos de adicionar decorators a alguns componentes abstratos. A partir da v9, todas as classes que usam DI do Angular devem ter um decorator de classe do Angular.

Exemplo dos exemplos de compatibilidade do Ivy:

Antes :

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

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

Depois de :

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

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