Code Coverage breaks constructor inheritance

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [x] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 7.2

Description

Running with code coverage enabled breaks constructor inheritance.

Inserting a constructor in the ValidationDirective also fixes the error.

🔬 Minimal Reproduction

https://github.com/CSchulz/angular-code-coverage-breaks-constructor-inheritance

Run npm test results into

TypeError: Cannot read property ‘get’ of undefined

Run npm test -- --codeCoverage false succeeds.

🔥 Exception or Error

For some reason the dependencies of the ValidationDirective don’t get resolved correctly. You can see in the createClass method that the deps of ValidationDirective are empty.

🌍 Your Environment

Angular CLI: 8.0.3
Node: 10.15.3
OS: darwin x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.800.3
@angular-devkit/build-angular      0.800.3
@angular-devkit/build-ng-packagr   0.800.3
@angular-devkit/build-optimizer    0.800.3
@angular-devkit/build-webpack      0.800.3
@angular-devkit/core               8.0.3
@angular-devkit/schematics         8.0.3
@angular/cli                       8.0.3
@ngtools/json-schema               1.1.0
@ngtools/webpack                   8.0.3
@schematics/angular                8.0.3
@schematics/update                 0.800.3
ng-packagr                         5.3.0
rxjs                               6.4.0
typescript                         3.4.5
webpack                            4.30.0

[nasvillanueva]

I encountered this today with component, and I it somehow got fixed after overriding the constructor in the extending component.

@Component(..)
class AbstractComponent {
   constructor(@Inject(TOKEN) protected injectedDependency) {}
}

@Component(..)
class B extends AbstractComponent {} // works properly

@Component(..)
class C extends AbstractComponent { // tests fail due to injectedDependency not being found
   field = true;
   someFunc() {}
}

@Component(..)
class D extends AbstractComponent { // works properly
   field = true;
   
   constructor(@Inject(TOKEN) injectedDependency) {
      super(injectedDependency)
   }
   
   someFunc() {}
}

For some reason, adding fields/functions to a component extending another component causes this error to appear. But overriding the constructor and calling super seems to fix it.

I’m aware that this is not a proper fix, but I prefer to keep our compiler target to es2015.

[Platonn]

I also encountered the issue. When the flag code-coverage is set, then the dependencies are not injected in to the inherited constructor of the child class, in the unit tests. Which makes the tests to fail.

It started to happen only when I changed the tsconfig’s target from es5 to es2015.

Degrading the target back to es5 is not a welcomed solution. After upgrading to Angular 13, which doesn’t support IE11, it makes sense to change the target in the unit tests to es2015. Moreover, after upgrading to Angular 13, I had issues with some other tests when still using target es5. So I was kind of forced to update target to es2015.

@alan-agius4 do you think that in the times of Angular 13 we could increase a bit the severity of this issue? now it’s labelled severity5: regression