Runtime can't resolve all parameters for inherited constructor

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] 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

Current behavior

Subclass components inheriting a base class’s constructor that is expecting a dependency to be injected, fail with a runtime error:

Uncaught Error: Can't resolve all parameters for FooComponent: (?).
    at syntaxError (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:706)
    at CompileMetadataResolver._getDependenciesMetadata (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:15921)
    at CompileMetadataResolver._getTypeMetadata (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:15756)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:15241)
    at CompileMetadataResolver.loadDirectiveMetadata (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:15095)
    at eval (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:34633)
    at Array.forEach (<anonymous>)
    at eval (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:34632)
    at Array.forEach (<anonymous>)
    at JitCompiler._loadModules (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:34629)

This happens only when using the JIT compiler; Using the AOT otoh, produces a working app.

Expected behavior

The dependency that the baseclass constructor expects should be injected without error and workarounds.

Minimal reproduction of the problem with instructions

Please see:

https://stackblitz.com/edit/angular-gitter-qwhhxq or https://angular-gitter-qwhhxq.stackblitz.io

Open browser console to see the error message as reported.

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

The issue can of course be worked around by copying the constructor signature to the subclass component and then passing all arguments into super(...) but that can hardly be considered an acceptable solution.

Environment

Angular version: 5.2.7

Browser:
- [x] Chrome (desktop) version Version 64.0.3282.186 (Official Build) (64-bit)
 
For Tooling issues:
- Node version: 8.9.4
- Platform:  Mac OS X

Others:
Use the JIT compiler. The AOT compiler doesn't exhibit the problem.

Note that this issue seems reminiscent of issues #15502 and #15517 from almost a year ago. This is also where I learned to try it with the AOT compiler instead.

[jamcoupe]

You need to add a class decorator so that Angular can pick up the type that’s required for injection.

import { BarService } from './bar.service';
import { Injectable } from '@angular/core';

@Injectable()
export class BaseComponent {
  constructor(protected service: BarService) { };
}

[jamcoupe]

AFAIK…

AOT will work because it strips away all Angular decorators during build time (it can do all the magic of finding types before it runs any of your JavaScript in the browser).

JIT requires annotations to be applied so that the type information is emitted within the JavaScript so JIT can pick them up.

If a class is not decoratored then the TypeScript compiler is not going to emit the types required by the class.

For example the following TypeScript with a class decorator:

@SomeClassDecorator()
export class SomeClass { 
    constructor(someParameter: SomeParameter) {}
}

// TypeScript compiler emits (all the type information required for JIT):

var SomeClass = /** @class */ (function () {
    function SomeClass(someParameter) {}
    SomeClass = __decorate([
        SomeClassDecorator(),
        __metadata("design:paramtypes", [SomeParameter])
    ], SomeClass);
    return SomeClass;
}());

When you omit the decorator:

export class SomeClass { 
    constructor(someParameter: SomeParameter) {}
}

// TypeScript compiler emits (no type information for JIT to work):

var SomeClass = /** @class */ (function () {
  function SomeClass(someParameter) {}
  return SomeClass;
}());

If anything, the real issue would be that when building AOT it should output a warning or error to the user saying that if you don’t decorate the base class it wont work in JIT mode.