fix: ensure components work with ES2015 in jit mode.

Fixes that some components does not render properly when used inside of a ES2015 JIT application. This is due to an ongoing Angular issue which has been caused due to a brittle Regex check [introduced here](angular/angular#22356 (comment)) that should be replaced with a more clean approach for identifying classes that inherit metadata from another class.

* angular/angular#22642
* angular/tsickle#760

See the more detailed issue here: angular#12760

Fixes angular#9329.

Author: devversion

src/lib/expansion/expansion-panel.ts

@@ -35,6 +35,8 @@ import {MatAccordion} from './accordion';
 import {matExpansionAnimations} from './expansion-animations';
 import {MatExpansionPanelContent} from './expansion-panel-content';
 
+// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
+export const _CdkAccordionItem = CdkAccordionItem;
 
 /** MatExpansionPanel's states. */
 export type MatExpansionPanelState = 'expanded' | 'collapsed';
@@ -70,7 +72,7 @@ let uniqueId = 0;
     '[class.mat-expansion-panel-spacing]': '_hasSpacing()',
   }
 })
-export class MatExpansionPanel extends CdkAccordionItem
+export class MatExpansionPanel extends _CdkAccordionItem
   implements AfterContentInit, OnChanges, OnDestroy {
   /** Whether the toggle indicator should be hidden. */
   @Input()

src/lib/input/autosize.ts

@@ -9,6 +9,8 @@
 import {CdkTextareaAutosize} from '@angular/cdk/text-field';
 import {Directive, Input} from '@angular/core';
 
+// TODO(devversion): Workaround for https://github.com/angular/material2/issues/12760
+export const _CdkTextareaAutosize = CdkTextareaAutosize;
 
 /**
  * Directive to automatically resize a textarea to fit its content.
@@ -27,7 +29,7 @@ import {Directive, Input} from '@angular/core';
     '(input)': '_noopInputHandler()',
   },
 })
-export class MatTextareaAutosize extends CdkTextareaAutosize {
+export class MatTextareaAutosize extends _CdkTextareaAutosize {
   @Input()
   get matAutosizeMinRows(): number { return this.minRows; }
   set matAutosizeMinRows(value: number) { this.minRows = value; }

src/lib/stepper/step-label.ts

@@ -6,14 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, TemplateRef} from '@angular/core';
+import {Directive} from '@angular/core';
 import {CdkStepLabel} from '@angular/cdk/stepper';
 
+// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
+export const _CdkStepLabel = CdkStepLabel;
+
 @Directive({
   selector: '[matStepLabel]',
 })
-export class MatStepLabel extends CdkStepLabel {
-  constructor(template: TemplateRef<any>) {
-    super(template);
-  }
-}
+export class MatStepLabel extends _CdkStepLabel {}

src/lib/stepper/stepper-button.ts

@@ -10,6 +10,10 @@ import {Directive} from '@angular/core';
 import {CdkStepper, CdkStepperNext, CdkStepperPrevious} from '@angular/cdk/stepper';
 import {MatStepper} from './stepper';
 
+// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
+export const _CdkStepperNext = CdkStepperNext;
+export const _CdkStepperPrevious = CdkStepperPrevious;
+
 /** Button that moves to the next step in a stepper workflow. */
 @Directive({
   selector: 'button[matStepperNext]',
@@ -20,7 +24,7 @@ import {MatStepper} from './stepper';
   inputs: ['type'],
   providers: [{provide: CdkStepper, useExisting: MatStepper}]
 })
-export class MatStepperNext extends CdkStepperNext {}
+export class MatStepperNext extends _CdkStepperNext {}
 
 /** Button that moves to the previous step in a stepper workflow. */
 @Directive({
@@ -32,4 +36,4 @@ export class MatStepperNext extends CdkStepperNext {}
   inputs: ['type'],
   providers: [{provide: CdkStepper, useExisting: MatStepper}]
 })
-export class MatStepperPrevious extends CdkStepperPrevious {}
+export class MatStepperPrevious extends _CdkStepperPrevious {}

src/lib/stepper/stepper.ts

@@ -36,6 +36,8 @@ import {takeUntil} from 'rxjs/operators';
 import {matStepperAnimations} from './stepper-animations';
 import {MatStepperIcon, MatStepperIconContext} from './stepper-icon';
 
+// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
+export const _CdkStepper = CdkStepper;
 
 @Component({
   moduleId: module.id,
@@ -72,7 +74,7 @@ export class MatStep extends CdkStep implements ErrorStateMatcher {
 @Directive({
   selector: '[matStepper]'
 })
-export class MatStepper extends CdkStepper implements AfterContentInit {
+export class MatStepper extends _CdkStepper implements AfterContentInit {
   /** The list of step headers of the steps in the stepper. */
   @ViewChildren(MatStepHeader) _stepHeader: QueryList<MatStepHeader>;
 

src/lib/table/cell.ts

@@ -15,6 +15,11 @@ import {
   CdkHeaderCellDef,
 } from '@angular/cdk/table';
 
+// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
+export const _CdkCellDef = CdkCellDef;
+export const _CdkHeaderCellDef = CdkHeaderCellDef;
+export const _CdkFooterCellDef = CdkFooterCellDef;
+
 /**
  * Cell definition for the mat-table.
  * Captures the template of a column's data row cell as well as cell-specific properties.
@@ -23,7 +28,7 @@ import {
   selector: '[matCellDef]',
   providers: [{provide: CdkCellDef, useExisting: MatCellDef}]
 })
-export class MatCellDef extends CdkCellDef {}
+export class MatCellDef extends _CdkCellDef {}
 
 /**
  * Header cell definition for the mat-table.
@@ -33,7 +38,7 @@ export class MatCellDef extends CdkCellDef {}
   selector: '[matHeaderCellDef]',
   providers: [{provide: CdkHeaderCellDef, useExisting: MatHeaderCellDef}]
 })
-export class MatHeaderCellDef extends CdkHeaderCellDef {}
+export class MatHeaderCellDef extends _CdkHeaderCellDef {}
 
 /**
  * Footer cell definition for the mat-table.
@@ -43,7 +48,7 @@ export class MatHeaderCellDef extends CdkHeaderCellDef {}
   selector: '[matFooterCellDef]',
   providers: [{provide: CdkFooterCellDef, useExisting: MatFooterCellDef}]
 })
-export class MatFooterCellDef extends CdkFooterCellDef {}
+export class MatFooterCellDef extends _CdkFooterCellDef {}
 
 /**
  * Column definition for the mat-table.

src/lib/table/row.ts

@@ -20,6 +20,11 @@ import {
   CdkRowDef,
 } from '@angular/cdk/table';
 
+// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
+export const _CdkHeaderRowDef = CdkHeaderRowDef;
+export const _CdkFooterRowDef = CdkFooterRowDef;
+export const _CdkRowDef = CdkRowDef;
+
 /**
  * Header row definition for the mat-table.
  * Captures the header row's template and other header properties such as the columns to display.
@@ -29,7 +34,7 @@ import {
   providers: [{provide: CdkHeaderRowDef, useExisting: MatHeaderRowDef}],
   inputs: ['columns: matHeaderRowDef', 'sticky: matHeaderRowDefSticky'],
 })
-export class MatHeaderRowDef extends CdkHeaderRowDef {}
+export class MatHeaderRowDef extends _CdkHeaderRowDef {}
 
 /**
  * Footer row definition for the mat-table.
@@ -40,7 +45,7 @@ export class MatHeaderRowDef extends CdkHeaderRowDef {}
   providers: [{provide: CdkFooterRowDef, useExisting: MatFooterRowDef}],
   inputs: ['columns: matFooterRowDef', 'sticky: matFooterRowDefSticky'],
 })
-export class MatFooterRowDef extends CdkFooterRowDef {}
+export class MatFooterRowDef extends _CdkFooterRowDef {}
 
 /**
  * Data row definition for the mat-table.
@@ -52,7 +57,7 @@ export class MatFooterRowDef extends CdkFooterRowDef {}
   providers: [{provide: CdkRowDef, useExisting: MatRowDef}],
   inputs: ['columns: matRowDefColumns', 'when: matRowDefWhen'],
 })
-export class MatRowDef<T> extends CdkRowDef<T> {}
+export class MatRowDef<T> extends _CdkRowDef<T> {}
 
 /** Footer template container that contains the cell outlet. Adds the right class and role. */
 @Component({

src/lib/table/table.ts

@@ -6,18 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  Attribute,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  IterableDiffers,
-  Optional,
-  ViewEncapsulation
-} from '@angular/core';
 import {CDK_TABLE_TEMPLATE, CdkTable} from '@angular/cdk/table';
-import {Directionality} from '@angular/cdk/bidi';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
+export const _CdkTable = CdkTable;
 
 /**
  * Wrapper for the CdkTable with Material design styles.
@@ -34,20 +27,7 @@ import {Directionality} from '@angular/cdk/bidi';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatTable<T> extends CdkTable<T> {
+export class MatTable<T> extends _CdkTable<T> {
   /** Overrides the sticky CSS class set by the `CdkTable`. */
   protected stickyCssClass = 'mat-table-sticky';
-
-  // TODO(andrewseguin): Remove this explicitly set constructor when the compiler knows how to
-  // properly build the es6 version of the class. Currently sets ctorParameters to empty due to a
-  // fixed bug.
-  // https://github.com/angular/tsickle/pull/760 - tsickle PR that fixed this
-  // https://github.com/angular/angular/pull/23531 - updates compiler-cli to fixed version
-  constructor(protected _differs: IterableDiffers,
-              protected _changeDetectorRef: ChangeDetectorRef,
-              protected _elementRef: ElementRef,
-              @Attribute('role') role: string,
-              @Optional() protected readonly _dir: Directionality) {
-    super(_differs, _changeDetectorRef, _elementRef, role, _dir);
-  }
 }

src/lib/tabs/tab-label.ts

@@ -6,15 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
+import {Directive} from '@angular/core';
 import {CdkPortal} from '@angular/cdk/portal';
 
+// TODO(devversion): Workaround for https://github.com/angular/material2/issues/12760
+export const _CdkPortal = CdkPortal;
+
 /** Used to flag tab labels for use with the portal directive */
 @Directive({
   selector: '[mat-tab-label], [matTabLabel]',
 })
-export class MatTabLabel extends CdkPortal {
-  constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
-    super(templateRef, viewContainerRef);
-  }
-}
+export class MatTabLabel extends _CdkPortal {}

src/lib/tree/node.ts

@@ -6,12 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  CdkNestedTreeNode,
-  CdkTree,
-  CdkTreeNode,
-  CdkTreeNodeDef,
-} from '@angular/cdk/tree';
+import {CdkNestedTreeNode, CdkTree, CdkTreeNode, CdkTreeNodeDef} from '@angular/cdk/tree';
 import {
   AfterContentInit,
   Attribute,
@@ -22,11 +17,12 @@ import {
   IterableDiffers,
   OnDestroy,
   QueryList,
-  TemplateRef,
 } from '@angular/core';
 import {CanDisable, HasTabIndex, mixinDisabled, mixinTabIndex} from '@angular/material/core';
 import {MatTreeNodeOutlet} from './outlet';
 
+// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
+export const _CdkTreeNodeDef = CdkTreeNodeDef;
 
 export const _MatTreeNodeMixinBase = mixinTabIndex(mixinDisabled(CdkTreeNode));
 export const _MatNestedTreeNodeMixinBase = mixinTabIndex(mixinDisabled(CdkNestedTreeNode));
@@ -69,17 +65,8 @@ export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T>
   ],
   providers: [{provide: CdkTreeNodeDef, useExisting: MatTreeNodeDef}]
 })
-export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
+export class MatTreeNodeDef<T> extends _CdkTreeNodeDef<T> {
   @Input('matTreeNode') data: T;
-
-  // TODO(andrewseguin): Remove this explicitly set constructor when the compiler knows how to
-  // properly build the es6 version of the class. Currently sets ctorParameters to empty due to a
-  // fixed bug.
-  // https://github.com/angular/tsickle/pull/760 - tsickle PR that fixed this
-  // https://github.com/angular/angular/pull/23531 - updates compiler-cli to fixed version
-  constructor(template: TemplateRef<any>) {
-    super(template);
-  }
 }
 
 /**

src/lib/tree/padding.ts

@@ -5,10 +5,11 @@
  * 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 {CdkTreeNodePadding, CdkTreeNode, CdkTree} from '@angular/cdk/tree';
-import {Directionality} from '@angular/cdk/bidi';
-import {Directive, Input, Optional, Renderer2, ElementRef} from '@angular/core';
+import {CdkTreeNodePadding} from '@angular/cdk/tree';
+import {Directive, Input} from '@angular/core';
 
+// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
+export const _CdkTreeNodePadding = CdkTreeNodePadding;
 
 /**
  * Wrapper for the CdkTree padding with Material design styles.
@@ -17,24 +18,11 @@ import {Directive, Input, Optional, Renderer2, ElementRef} from '@angular/core';
   selector: '[matTreeNodePadding]',
   providers: [{provide: CdkTreeNodePadding, useExisting: MatTreeNodePadding}]
 })
-export class MatTreeNodePadding<T> extends CdkTreeNodePadding<T> {
+export class MatTreeNodePadding<T> extends _CdkTreeNodePadding<T> {
 
   /** The level of depth of the tree node. The padding will be `level * indent` pixels. */
   @Input('matTreeNodePadding') level: number;
 
   /** The indent for each level. Default number 40px from material design menu sub-menu spec. */
   @Input('matTreeNodePaddingIndent') indent: number;
-
-  // TODO(andrewseguin): Remove this explicitly set constructor when the compiler knows how to
-  // properly build the es6 version of the class. Currently sets ctorParameters to empty due to a
-  // fixed bug.
-  // https://github.com/angular/tsickle/pull/760 - tsickle PR that fixed this
-  // https://github.com/angular/angular/pull/23531 - updates compiler-cli to fixed version
-  constructor(_treeNode: CdkTreeNode<T>,
-              _tree: CdkTree<T>,
-              _renderer: Renderer2,
-              _element: ElementRef,
-              @Optional() _dir: Directionality) {
-      super(_treeNode, _tree, _renderer, _element, _dir);
-    }
 }

src/lib/tree/toggle.ts

@@ -6,8 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {CdkTreeNodeToggle} from '@angular/cdk/tree';
 import {Directive, Input} from '@angular/core';
-import {CdkTreeNodeToggle, CdkTree, CdkTreeNode} from '@angular/cdk/tree';
+
+// TODO(devversion): workaround for https://github.com/angular/material2/issues/12760
+export const _CdkTreeNodeToggle = CdkTreeNodeToggle;
 
 /**
  * Wrapper for the CdkTree's toggle with Material design styles.
@@ -19,15 +22,6 @@ import {CdkTreeNodeToggle, CdkTree, CdkTreeNode} from '@angular/cdk/tree';
   },
   providers: [{provide: CdkTreeNodeToggle, useExisting: MatTreeNodeToggle}]
 })
-export class MatTreeNodeToggle<T> extends CdkTreeNodeToggle<T> {
+export class MatTreeNodeToggle<T> extends _CdkTreeNodeToggle<T> {
   @Input('matTreeNodeToggleRecursive') recursive: boolean = false;
-
-  // TODO(andrewseguin): Remove this explicitly set constructor when the compiler knows how to
-  // properly build the es6 version of the class. Currently sets ctorParameters to empty due to a
-  // fixed bug.
-  // https://github.com/angular/tsickle/pull/760 - tsickle PR that fixed this
-  // https://github.com/angular/angular/pull/23531 - updates compiler-cli to fixed version
-  constructor(_tree: CdkTree<T>, _treeNode: CdkTreeNode<T>) {
-    super(_tree, _treeNode);
-  }
 }