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

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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 21 (2 by maintainers)

Commits related to this issue

Downgrad fix-error https://github.com/angular/components/issues/11875#issuecomment-399138675 — committed to OpenArchitex/OpenLearnr by SudharakaP 5 years ago

Most upvoted comments

After upgrading Angular to 6.0.6 the problem seems to be fixed

+35

GuillaumeMilani on Jun 21, 2018

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

+15

mscard02 on Jun 21, 2018

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

+11

GuillaumeMilani on Jun 21, 2018

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

hidaytrahman on Jun 23, 2018

same for mat-form-field

gabibereschi on Jun 21, 2018

@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.

vicatcu on Jul 5, 2018

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?

OsamaAwniHamdan on Jun 21, 2018

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

pemberton on Jun 21, 2018

upgrading angular solve the issue. Thanks to @GuillaumeMilani

OsamaAwniHamdan on Jun 25, 2018