Components: Using stepper throws an exception "ERROR TypeError: _this._driver.validateStyleProperty is not a function"

[OsamaAwniHamdan]

Bug, feature request, or proposal:

I am using angular 6, I installd the material and I am trying to use the stepper component, like ths:
<mat-horizontal-stepper> <mat-step label="step1">step1</mat-step> <mat-step label="step2">step2</mat-step> </mat-horizontal-stepper>
the app.module imports is like this:
imports: [ BrowserModule, BrowserAnimationsModule, RouterModule.forRoot(appRoutes) , FormsModule, HttpClientModule , FormWizardModule , ArchwizardModule, MatStepperModule ],
but I got the following exception:
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 tried to debug the issue, I found there is a mismatch between the functions parameters:

the bodyNode contains the driver value and the _driver contains the normlizer and the normlizer is empty

[pemberton]

I have the same issue with mat-sidenav-container component.

[GuillaumeMilani]

Same here with map-paginator

[mscard02]

same issue with header

[gabibereschi]

same for mat-form-field

[ashokars]

same here for mat-form-field. Any fix so far

[mscard02]

temp fix:
go to packages.json -> dependencies
"@angular/animations": "6.0.5",
npm install

[OsamaAwniHamdan]

temp fix:
go to packages.json -> dependencies
"@angular/animations": "6.0.5",
npm install

I tried that but it does not work with me.
Any one have it work?

[GuillaumeMilani]

After upgrading Angular to 6.0.6 the problem seems to be fixed

[nourhannaguib]

how can i update to Angular 6.0.6 i used the ng update command but it is not working ?

[GuillaumeMilani]

I don't know if there is a more secure or official way to do this, what I did is :

• Replace the version of each @angular/ dependency in packages.json by 6.0.6 (previously 6.0.3 in my case)
• [Optional] remove node_modules/folder
• npm install

[magnusrambech]

I have the same issue with mat-sidenav-container component

Same issue

-Replace the version of each @angular/ dependency in packages.json by 6.0.6 (previously 6.0.3 in my case)
-[Optional] remove node_modules/folder
-npm install

This did not work for me. Any fix yet?

[EdricChan03]

You can also try updating via npm update.

[pemberton]

temp fix:
go to packages.json -> dependencies
"@angular/animations": "6.0.5",
npm install

work for me! thank you!

[hidaytrahman]

I have updated angular version with material. solution provided by @GuillaumeMilani fixed issue for me

I used below commands

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

[OsamaAwniHamdan]

upgrading angular solve the issue.
Thanks to @GuillaumeMilani

[josephperrott]

As noted above, it appears that the @angular/animations package needs to be updated for your project.

[allnulled]

I just wanted to say that I finally got a PDF of 1000 pages from the Angular reference. I do not want to criticize your job. I just wanted to say it.

[yxz0248]

Just let your material version as same as your angular version.

[vicatcu]

@josephperrott Sorry to resurrect, but any chance this has come back in "@angular/animations": "6.0.7" + "@angular/material": "6.3.2"? Here's a stackblitz: https://stackblitz.com/edit/angular-zqmhyo
... or I can open a new issue you if you prefer?

... works correctly if I revert @angular/animations to "6.0.5"... still broken in "6.0.6" as well.

[lonnenjunior]

I'm still facing this problem
"dependencies": { "@angular/animations": "^6.0.0", "@angular/cdk": "^6.0.0", "@angular/material": "^6.0.0", "hammerjs": "^2.0.8" }
When I downgrade animations to version 6.0.5 it works. But I don't think that a downgrade is a proper solution. Are there any other solutions for this?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}