En mi aplicación Angular 9, tengo una clase abstracta:
export abstract class MyAbstractComponent { constructor( protected readonly cd: ChangeDetectorRef, ) { super(); } // ... }y un Componente que lo extiende:
@Component({ // ... }) export class MyConcreteComponent extends MyAbstractComponent { // ... }Todo funciona bien excepto las pruebas, donde me sale el siguiente error:
Error: este constructor no es compatible con la inyección de dependencia angular porque su dependencia en el índice 0 de la lista de parámetros no es válida. Esto puede suceder si el tipo de dependencia es una primitiva como una cadena o si a un ancestro de esta clase le falta un decorador angular.
Verifique que 1) el tipo para el parámetro en el índice 0 sea correcto y 2) los decoradores angulares correctos estén definidos para esta clase y sus ancestros.
Enfrentamos el mismo problema al migrar a la versión 9. Al final, descubrimos que olvidamos agregar decoradores a algunos componentes abstractos. A partir de v9, todas las clases que usan Angular DI deben tener un decorador de nivel de clase Angular.
Ejemplo de ejemplos de compatibilidad de Ivy :
Antes:
export class DataService { constructor(@Inject('CONFIG') public config: DataConfig) {} } @Injectable() export class AppService extends DataService {...}Después:
@Injectable() // <--- THIS export class DataService { constructor(@Inject('CONFIG') public config: DataConfig) {} } @Injectable() export class AppService extends DataService {...}Me tomó un tiempo, pero después de crear una nueva aplicación con angular 10.2.3, mi base tsconfig.json no tenía el
"emitDecoratorMetadata": true,
en las opciones del compilador!
Después de agregar eso nuevamente a tsconfig.json , DI funcionó como se esperaba.
Resolví mi problema agregando el constructor en MyConcreteComponent y llamando al constructor super(...) :
@Component({ // ... }) export class MyConcreteComponent extends MyAbstractComponent { // adding this block fixed my issue constructor( protected readonly cd: ChangeDetectorRef, ) { super(cd); } // ... }