Combination of Webpack + JIT + ES2015 (super)classes breaks dependency injection

[njirem]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

When using target ES2015 on Angular 6+ using JIT, there is some inconsistent dependency injection behavior when superclasses are used.

If a component is created that extends from another class. Like this:

@Injectable()
export class Parent {
    constructor(readonly injected: SomeService) { }
}

@Injectable()
export class WorkingService extends Parent { }

The WorkingService will get SomeService injected, but only if the two classes are in the same file. If Parent is imported from another file, the service won't get injected.

When the two are split in separate files, Webpack will rename the import of Parent to something like: _temp__WEBPACK_IMPORTED_MODULE_1__["Parent"]. This seems to break the regular expressions used to decide if there is a superclass in this piece of code.

Expected behavior

I expect dependency injection with super classes to consistently work in JIT.

Minimal reproduction of the problem with instructions

This cannot be reproduced in StackBlitz, but I have created a repo that shows a working and a broken case:
https://github.com/njirem/angular-jit-injection-issue
The issue is shown in src/app/case/my.spec.ts. Just clone the repository, npm i and run ng test.
I created a test case with a service and one with a component, just to be sure (they both fail).

This was created by running ng new, setting the tsconfig target to ES2015 and adding a test with a service that extends from an Injectable class which uses an injected service.
This will work correctly if the superclass is in the same file, but fails if the superclass is in another file.

What is the motivation / use case for changing the behavior?

The behavior is inconsistent, it works in AoT or if the extended service is in the same file, but when using JIT and extending from a class in another file in ES2015 it will fail.

Environment

Angular version: 6.2.5, also tested it with 7.0.0-rc

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 10.10.0
- Platform:  Mac

[trotyl]

Tracked by #24014

[Alorel]

This has been the case for a while now iirc. You can work around it by explicitly using the Inject decorator in your parent classes:

@Injectable()
export class Parent {
    // Decorator required in parent class
    constructor(@Inject(SomeService) readonly injected: SomeService) { }
}

@Injectable()
export class WorkingService extends Parent {
   // Decorator not needed in bottom level class
   public constructor(parentDep: SomeService, private readonly ownDep: AnotherService) {
      super(parentDep);
   }
 }

[trotyl]

Should be closed as #24014 already merged.

Note: more complicated usage may hit #24156.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}