fix: workaround for es2015 inheritance not always working (#13834)

Since the inherited `ctorParameters` can be either a static array or a function that returns an array, the workaround that landed with e9103a6 does not fully solve the issue, which developers experience when using Angular Material with ES2015. This improves the workaround and ensures that it handles both scenarios properly.

Also the workaround has been moved into a separate function in order to remove code duplication. This should also make it easier to delete the workaround if we need to.

Author: devversion

CHANGELOG.md

@@ -4,7 +4,6 @@
 
 ### Bug Fixes
 
-* **build:** material not working with ES2015 ([#13709](https://github.com/angular/material2/issues/13709)) ([e9103a6](https://github.com/angular/material2/commit/e9103a6)), closes [#12760](https://github.com/angular/material2/issues/12760) [#13695](https://github.com/angular/material2/issues/13695)
 * **button-toggle:** webkit tap highlight conflicting with ripples ([#13721](https://github.com/angular/material2/issues/13721)) ([abd0278](https://github.com/angular/material2/commit/abd0278))
 * **cdk-platform:** pass `{}` to `@NgModule` since passing nothing breaks ([#13792](https://github.com/angular/material2/issues/13792)) ([5abb644](https://github.com/angular/material2/commit/5abb644))
 * **checkbox:** disabled property not being coerced ([#13755](https://github.com/angular/material2/issues/13755)) ([cee8c65](https://github.com/angular/material2/commit/cee8c65)), closes [#13739](https://github.com/angular/material2/issues/13739)

src/lib/core/constructor-metadata-inherit.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {Type} from '@angular/core';
+
+/**
+ * Workaround for https://github.com/angular/material2/issues/12760. In order to work around
+ * the issue where classes which extend external classes do not have the proper metadata in
+ * ES2015, we just manually inherit the metadata for the constructor parameters.
+ * TODO(devversion): check if we can remove the workaround after ivy landed.
+ */
+export function _inheritCtorParametersMetadata(target: Type<any>, base: Type<any>) {
+  (target as any)['ctorParameters'] = () => {
+    const baseParameters = (base as any)['ctorParameters'];
+    return (typeof baseParameters === 'function' ? baseParameters() : baseParameters) || [];
+  };
+}

src/lib/core/public-api.ts

@@ -20,3 +20,4 @@ export * from './selection/index';
 
 // TODO: don't have this
 export * from './testing/month-constants';
+export * from './constructor-metadata-inherit';

src/lib/input/autosize.ts

@@ -8,6 +8,7 @@
 
 import {CdkTextareaAutosize} from '@angular/cdk/text-field';
 import {Directive, Input} from '@angular/core';
+import {_inheritCtorParametersMetadata} from '@angular/material/core';
 
 /**
  * Directive to automatically resize a textarea to fit its content.
@@ -45,5 +46,4 @@ export class MatTextareaAutosize extends CdkTextareaAutosize {
 }
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatTextareaAutosize as any)['ctorParameters'] = () =>
-    (CdkTextareaAutosize as any)['ctorParameters'];
+_inheritCtorParametersMetadata(MatTextareaAutosize, CdkTextareaAutosize);

src/lib/stepper/step-label.ts

@@ -8,11 +8,12 @@
 
 import {Directive} from '@angular/core';
 import {CdkStepLabel} from '@angular/cdk/stepper';
+import {_inheritCtorParametersMetadata} from '@angular/material/core';
 
 @Directive({
   selector: '[matStepLabel]',
 })
 export class MatStepLabel extends CdkStepLabel {}
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatStepLabel as any)['ctorParameters'] = () => (CdkStepLabel as any)['ctorParameters'];
+_inheritCtorParametersMetadata(MatStepLabel, CdkStepLabel);

src/lib/stepper/stepper-button.ts

@@ -9,6 +9,7 @@
 import {Directive} from '@angular/core';
 import {CdkStepper, CdkStepperNext, CdkStepperPrevious} from '@angular/cdk/stepper';
 import {MatStepper} from './stepper';
+import {_inheritCtorParametersMetadata} from '@angular/material/core';
 
 /** Button that moves to the next step in a stepper workflow. */
 @Directive({
@@ -35,6 +36,5 @@ export class MatStepperNext extends CdkStepperNext {}
 export class MatStepperPrevious extends CdkStepperPrevious {}
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatStepperNext as any)['ctorParameters'] = () => (CdkStepperNext as any)['ctorParameters'];
-(MatStepperPrevious as any)['ctorParameters'] = () =>
-    (CdkStepperPrevious as any)['ctorParameters'];
+_inheritCtorParametersMetadata(MatStepperNext, CdkStepperNext);
+_inheritCtorParametersMetadata(MatStepperPrevious, CdkStepperPrevious);

src/lib/stepper/stepper.ts

@@ -38,7 +38,7 @@ import {
 } from '@angular/core';
 import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
 import {DOCUMENT} from '@angular/common';
-import {ErrorStateMatcher} from '@angular/material/core';
+import {_inheritCtorParametersMetadata, ErrorStateMatcher} from '@angular/material/core';
 import {Subject} from 'rxjs';
 import {takeUntil, distinctUntilChanged} from 'rxjs/operators';
 
@@ -124,7 +124,7 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
 }
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatStepper as any)['ctorParameters'] = () => (CdkStepper as any)['ctorParameters'];
+_inheritCtorParametersMetadata(MatStepper, CdkStepper);
 
 @Component({
   moduleId: module.id,

src/lib/table/cell.ts

@@ -14,6 +14,7 @@ import {
   CdkHeaderCell,
   CdkHeaderCellDef,
 } from '@angular/cdk/table';
+import {_inheritCtorParametersMetadata} from '@angular/material/core';
 
 /**
  * Cell definition for the mat-table.
@@ -46,10 +47,9 @@ export class MatHeaderCellDef extends CdkHeaderCellDef {}
 export class MatFooterCellDef extends CdkFooterCellDef {}
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatCellDef as any)['ctorParameters'] = () => (CdkCellDef as any)['ctorParameters'];
-(MatHeaderCellDef as any)['ctorParameters'] = () => (CdkHeaderCellDef as any)['ctorParameters'];
-(MatFooterCellDef as any)['ctorParameters'] = () => (MatFooterCellDef as any)['ctorParameters'];
-
+_inheritCtorParametersMetadata(MatCellDef, CdkCellDef);
+_inheritCtorParametersMetadata(MatHeaderCellDef, CdkHeaderCellDef);
+_inheritCtorParametersMetadata(MatFooterCellDef, CdkFooterCellDef);
 /**
  * Column definition for the mat-table.
  * Defines a set of cells available for a table column.

src/lib/table/row.ts

@@ -19,6 +19,7 @@ import {
   CdkRow,
   CdkRowDef,
 } from '@angular/cdk/table';
+import {_inheritCtorParametersMetadata} from '@angular/material/core';
 
 /**
  * Header row definition for the mat-table.
@@ -55,9 +56,9 @@ export class MatFooterRowDef extends CdkFooterRowDef {}
 export class MatRowDef<T> extends CdkRowDef<T> {}
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatHeaderRowDef as any)['ctorParameters'] = () => (CdkHeaderRowDef as any)['ctorParameters'];
-(MatFooterRowDef as any)['ctorParameters'] = () => (CdkFooterRowDef as any)['ctorParameters'];
-(MatRowDef as any)['ctorParameters'] = () => (CdkRowDef as any)['ctorParameters'];
+_inheritCtorParametersMetadata(MatHeaderRowDef, CdkHeaderRowDef);
+_inheritCtorParametersMetadata(MatFooterRowDef, CdkFooterRowDef);
+_inheritCtorParametersMetadata(MatRowDef, CdkRowDef);
 
 /** Footer template container that contains the cell outlet. Adds the right class and role. */
 @Component({

src/lib/table/table.ts

@@ -8,6 +8,7 @@
 
 import {CDK_TABLE_TEMPLATE, CdkTable} from '@angular/cdk/table';
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {_inheritCtorParametersMetadata} from '@angular/material/core';
 
 /**
  * Wrapper for the CdkTable with Material design styles.
@@ -30,4 +31,4 @@ export class MatTable<T> extends CdkTable<T> {
 }
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatTable as any)['ctorParameters'] = () => (CdkTable as any)['ctorParameters'];
+_inheritCtorParametersMetadata(MatTable, CdkTable);

src/lib/tabs/tab-label.ts

@@ -8,6 +8,7 @@
 
 import {Directive} from '@angular/core';
 import {CdkPortal} from '@angular/cdk/portal';
+import {_inheritCtorParametersMetadata} from '@angular/material/core';
 
 /** Used to flag tab labels for use with the portal directive */
 @Directive({
@@ -16,4 +17,4 @@ import {CdkPortal} from '@angular/cdk/portal';
 export class MatTabLabel extends CdkPortal {}
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatTabLabel as any)['ctorParameters'] = () => (CdkPortal as any)['ctorParameters'];
+_inheritCtorParametersMetadata(MatTabLabel, CdkPortal);

src/lib/tree/node.ts

@@ -19,6 +19,7 @@ import {
   QueryList,
 } from '@angular/core';
 import {
+  _inheritCtorParametersMetadata,
   CanDisable, CanDisableCtor,
   HasTabIndex,
   HasTabIndexCtor,
@@ -77,7 +78,7 @@ export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
 }
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatTreeNodeDef as any)['ctorParameters'] = () => (CdkTreeNodeDef as any)['ctorParameters'];
+_inheritCtorParametersMetadata(MatTreeNodeDef, CdkTreeNodeDef);
 
 /**
  * Wrapper for the CdkTree nested node with Material design styles.

src/lib/tree/padding.ts

@@ -7,6 +7,7 @@
  */
 import {CdkTreeNodePadding} from '@angular/cdk/tree';
 import {Directive, Input} from '@angular/core';
+import {_inheritCtorParametersMetadata} from '@angular/material/core';
 
 /**
  * Wrapper for the CdkTree padding with Material design styles.
@@ -25,5 +26,4 @@ export class MatTreeNodePadding<T> extends CdkTreeNodePadding<T> {
 }
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatTreeNodePadding as any)['ctorParameters'] = () =>
-    (CdkTreeNodePadding as any)['ctorParameters'];
+_inheritCtorParametersMetadata(MatTreeNodePadding, CdkTreeNodePadding);

src/lib/tree/toggle.ts

@@ -8,6 +8,7 @@
 
 import {CdkTreeNodeToggle} from '@angular/cdk/tree';
 import {Directive, Input} from '@angular/core';
+import {_inheritCtorParametersMetadata} from '@angular/material/core';
 
 /**
  * Wrapper for the CdkTree's toggle with Material design styles.
@@ -24,4 +25,4 @@ export class MatTreeNodeToggle<T> extends CdkTreeNodeToggle<T> {
 }
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatTreeNodeToggle as any)['ctorParameters'] = () => (CdkTreeNodeToggle as any)['ctorParameters'];
+_inheritCtorParametersMetadata(MatTreeNodeToggle, CdkTreeNodeToggle);

src/lib/tree/tree.ts

@@ -9,6 +9,7 @@
 import {CdkTree} from '@angular/cdk/tree';
 import {ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation} from '@angular/core';
 import {MatTreeNodeOutlet} from './outlet';
+import {_inheritCtorParametersMetadata} from '@angular/material/core';
 
 /**
  * Wrapper for the CdkTable with Material design styles.
@@ -33,4 +34,4 @@ export class MatTree<T> extends CdkTree<T> {
 }
 
 // TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
-(MatTree as any)['ctorParameters'] = () => (CdkTree as any)['ctorParameters'];
+_inheritCtorParametersMetadata(MatTree, CdkTree);