Dependency injection not working for derived classes in ES2015

[devversion]

NOTE: This is a tracking issue!

Consider we have a ES2015 transpiled class for the MatRowDef. The class extends the external CdkRowDef class (which comes from another node module).

material/es2015/table.ts

class MatRowDef extends CdkRowDef {}

MatRowDef.decorators = [SOME_METADATA];
// No MatRowDef.ctorParameters because the "constructor" should be inherited.

cdk/es2015/table.ts

class CdkRowDef {
    constructor(template, _differs) {
        // Does something with template & differ.
    }
}
CdkRowDef.decorators = [SOME_METADATA];
CdkRowDef.ctorParameters = () => [
    { type: TemplateRef, },
    { type: IterableDiffers, },
];

Technically this works within ES2015 applications now. The ReflectionCapabilities from @angular/core are able to properly figure out that MatRowDef is a directive which does not have an explicit constructor, but inherits a constructor from CdkRowDef.

This is being done through a brittle Regular expression that matches ES2015 classes which such traits. See this code snippet from Angular core

---

But now, if we take the exact same scenario from above and just consider that we run Webpack/ or use the Angular CLI, it won't work at all.

This is because Webpack transforms the ES2015 class into something like that:

Note: This is because CdkRowDef comes from another node module

class MatRowDef extends _angular_cdk_table__WEBPACK_IMPORTED_MODULE_1__["CdkRowDef"] {}

MatRowDef.decorators = [SOME_METADATA];
// No MatRowDef.ctorParameters because the "constructor" should be inherited.

Now: The regular expression (mentioned above) does no longer match the transformed class. Meaning that Angular looks for the ctorParameters on MatRowDef and comes to the conclusion that MatRowDef does not inject anything. So, TemplateRef and IterableDiffers won't be injected, and the table won't work.

---

A better alternative to the brittle regular expression has been proposed with: angular/tsickle#760. This technically allows the ReflectionCapabilities to drop the regex and just check for ctorParameters to be present. A PR that takes advantage of that new possibility is already pending: See: angular/angular#22642.

This would solve the given problem that is not specific to Angular Material. Everyone that uses the CLI (or explicitly Webpack) may run into a similar issue.

Related: #11580. Related #9329.

[devversion]

Note: We've applied a workaround to fix this issue from our side.

• See the according commit: 2adced1. Released in 7.0.0-beta.0.

I will keep that issue open because at some point we want to remove the workarounds and this should just remind us of the workaround still being applied.

[devversion]

Small update. Looks like the workaround those not work properly for classes with members that will be created within the constructor.

Input (TS)

export class MatTable<T> extends _CdkTable<T> {
  /** Overrides the sticky CSS class set by the `CdkTable`. */
  protected stickyCssClass = 'mat-table-sticky';
}

Result (ES2015)**

class MatTable extends _CdkTable {
    constructor() {
        super(...arguments);
        /**
         * Overrides the sticky CSS class set by the `CdkTable`.
         */
        this.stickyCssClass = 'mat-table-sticky';
    }
}

Since this no longer matches the previously mentioned regular expression for determining classes which have an inherited pass-through constructor, Angular looks for ctorParameters on MatTable.

But since the constructor is generated dynamically and just uses arguments , there is no ctorParameters metadata available.

A workaround is to manually refer to the ctorParameters from CdkTable. It's important that the value of the MatTable.ctorParameters is different to the ctorParameters from CdkTable because otherwise the parameters will be ignored.

• See: this code part of the Angular reflection code