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

10
votes

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
],
4
angularangular-materialangular-material2angular6
In your package.json, try changing @angular/animations to version 6.0.5, then run npm install. – jmn
I tried that, its not work and I still got the same error – أسامة حمدان
stackblitz.com/edit/angular-g6ymwe I hope this demo helps – cRAN
I'm voting to close this as a duplicate of stackoverflow.com/questions/50990209/… – Edric
Possible duplicate of Angular Material Stepper not working on StackBlitz – Edric

4 Answers

8
votes

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.

1
votes

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

0
votes

you are required to upgrade Angular.json. Run these commands and that's it.

$ ng update @angular/cli
$ ng update @angular/core
$ ng update @angular/material
0
votes

npm install @angular/[email protected] --save --save-exact

Edit: Nevermind, found out that the verision of Ionic I use still uses Angular 6, which means the animation module need to match the angular core module’s version number. If your core module is version 6.0.1, you need to install @angular/[email protected] with npm