Material stepper with angular 6 does not work [method for animation not found in browser.js]

Question

I am using Angular 6 and I added the material components to my project following the steps in this Guide. But when I use the stepper component in my code I get the following exception in the console:

NewReqComponent.html:16 ERROR TypeError: _this._driver.validateStyleProperty is not a function
at browser.js:844
at Array.forEach (<anonymous>)
at browser.js:843
at Array.forEach (<anonymous>)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor._validateStyleAst (browser.js:840)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitStyle (browser.js:780)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitState (browser.js:678)
at browser.js:657
at Array.forEach (<anonymous>)
at browser.js:655

I used the component like this:

<mat-horizontal-stepper>
  <mat-step label="step1">step1</mat-step>
  <mat-step label="step2">step2</mat-step>
</mat-horizontal-stepper>

and the app.module.ts:

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  RouterModule.forRoot(appRoutes) ,
  FormsModule, HttpClientModule ,
  FormWizardModule ,
  ArchwizardModule,
  MatStepperModule
],

Answer 1

It seems that there is a mismatch between the angular version and the material version. Please make sure to update the angular to the latest.

try to set it to 6.0.6 version and I think it will works fine.

Answer 2

Please note that the full source code of your project might allow someone to help debug this issue more quickly. In the meantime, the following may help you work with Angular 6 and the Material Stepper.

The StackBlitz demo posted by cRAN in the comments is a nice vertical stepper demo. Since your question appears to be dealing with a horizontal stepper, I thought you might find a horizontal demo helpful also.

I was able to get the Angular Material Stepper working with Angular 6.0.3 and Angular Material 6.2.1. The following is a live demo that I created based on the StackBlitz project by Faisal that uses Angular 4 referenced in another SO question: Angular 4 & Material Stepper

For this, I created a brand new Angular 6 project and then added in key files from Faisal's demo per Angular 6, such as updating all the "md-" references to "mat-", plus I added live VERSION numbers for Angular CDK and Angular Material.

I hope someone finds this helpful.

StackBlitz: angular603-material621-stepper