Changes to address aot compiler failures

Author: jwshinjwshin

src/demo-app/stepper/stepper-demo.html

@@ -3,7 +3,7 @@
 <h3>Linear Vertical Stepper Demo using a single form</h3>
 <form [formGroup]="formGroup">
   <md-vertical-stepper formArrayName="formArray" [linear]="!isNonLinear">
-    <md-step formGroupName="0" [stepControl]="formArray.get([0])">
+    <md-step formGroupName="0" [stepControl]="formArray?.get([0])">
       <ng-template mdStepLabel>Fill out your name</ng-template>
       <md-input-container>
         <input mdInput placeholder="First Name" formControlName="firstNameFormCtrl" required>
@@ -19,7 +19,7 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
       </div>
     </md-step>
 
-    <md-step formGroupName="1" [stepControl]="formArray.get([1])" optional>
+    <md-step formGroupName="1" [stepControl]="formArray?.get([1])" optional>
       <ng-template mdStepLabel>
         <div>Fill out your email address</div>
       </ng-template>

src/lib/stepper/step-label.ts

@@ -9,10 +9,13 @@
 import {Directive, TemplateRef} from '@angular/core';
 import {CdkStepLabel} from '@angular/cdk/stepper';
 
+/** Workaround for https://github.com/angular/angular/issues/17849 */
+export const _MdStepLabel = CdkStepLabel;
+
 @Directive({
   selector: '[mdStepLabel], [matStepLabel]',
 })
-export class MdStepLabel extends CdkStepLabel {
+export class MdStepLabel extends _MdStepLabel {
   constructor(template: TemplateRef<any>) {
     super(template);
   }

src/lib/stepper/stepper-button.ts

@@ -10,18 +10,22 @@ import {Directive} from '@angular/core';
 import {CdkStepper, CdkStepperNext, CdkStepperPrevious} from '@angular/cdk/stepper';
 import {MdStepper} from './stepper';
 
+/** Workaround for https://github.com/angular/angular/issues/17849 */
+export const _MdStepperNext = CdkStepperNext;
+export const _MdStepperPrevious = CdkStepperPrevious;
+
 /** Button that moves to the next step in a stepper workflow. */
 @Directive({
   selector: 'button[mdStepperNext], button[matStepperNext]',
   host: {'(click)': '_stepper.next()'},
   providers: [{provide: CdkStepper, useExisting: MdStepper}]
 })
-export class MdStepperNext extends CdkStepperNext { }
+export class MdStepperNext extends _MdStepperNext { }
 
 /** Button that moves to the previous step in a stepper workflow. */
 @Directive({
   selector: 'button[mdStepperPrevious], button[matStepperPrevious]',
   host: {'(click)': '_stepper.previous()'},
   providers: [{provide: CdkStepper, useExisting: MdStepper}]
 })
-export class MdStepperPrevious extends CdkStepperPrevious { }
+export class MdStepperPrevious extends _MdStepperPrevious { }

src/lib/stepper/stepper.ts

@@ -32,14 +32,18 @@ import {
 import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
 import {MdStepHeader} from './step-header';
 
+/** Workaround for https://github.com/angular/angular/issues/17849 */
+export const _MdStep = CdkStep;
+export const _MdStepper = CdkStepper;
+
 @Component({
   moduleId: module.id,
   selector: 'md-step, mat-step',
   templateUrl: 'step.html',
   providers: [{provide: MD_ERROR_GLOBAL_OPTIONS, useExisting: MdStep}],
   encapsulation: ViewEncapsulation.None
 })
-export class MdStep extends CdkStep implements ErrorOptions {
+export class MdStep extends _MdStep implements ErrorOptions {
   /** Content for step label given by <ng-template matStepLabel> or <ng-template mdStepLabel>. */
   @ContentChild(MdStepLabel) stepLabel: MdStepLabel;
 
@@ -70,7 +74,7 @@ export class MdStep extends CdkStep implements ErrorOptions {
 @Directive({
   selector: '[mdStepper]'
 })
-export class MdStepper extends CdkStepper implements ErrorOptions {
+export class MdStepper extends _MdStepper implements ErrorOptions {
   /** The list of step headers of the steps in the stepper. */
   @ViewChildren(MdStepHeader, {read: ElementRef}) _stepHeader: QueryList<ElementRef>;