角度为 6 的材料步进器不起作用[在 browser.js 中找不到动画方法]答案

【问题标题】：Material stepper with angular 6 does not work [method for animation not found in browser.js]角度为 6 的材料步进器不起作用[在 browser.js 中找不到动画方法]
【发布时间】：2018-06-21 10:15:22
【问题描述】：

我正在使用 Angular 6，并按照Guide 中的步骤将材料组件添加到我的项目中。但是当我在我的代码中使用步进器组件时，我在控制台中得到以下异常：

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

我是这样使用组件的：

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

和 app.module.ts：

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

【问题讨论】：

在您的 package.json 中，尝试将 @angular/animations 更改为 6.0.5 版本，然后运行 npm install。
我试过了，它不起作用，我仍然得到同样的错误
stackblitz.com/edit/angular-g6ymwe 我希望这个演示对您有所帮助
我投票关闭这个作为stackoverflow.com/questions/50990209/…的副本
Angular Material Stepper not working on StackBlitz的可能重复

标签： angular angular-material angular-material2 angular6

【解决方案1】：

似乎角度版本和材质版本之间存在不匹配。请确保将 Angular 更新为最新版本。

尝试将其设置为 6.0.6 版本，我认为它可以正常工作。

【讨论】：

如果它不适用于 6.0.6，您可以尝试使用 6.0.5 在我的情况下它有效。感谢您的帮助。

【解决方案2】：

请注意，您的项目的完整源代码可能允许有人帮助更快地调试此问题。同时，以下内容可能会帮助您使用 Angular 6 和 Material Stepper。

cRAN 在 cmets 中发布的 StackBlitz 演示是一个不错的垂直步进演示。由于您的问题似乎与水平步进器有关，我认为您可能会发现水平演示也很有帮助。

我能够让 Angular Material Stepper 与 Angular 6.0.3 和 Angular Material 6.2.1 一起工作。以下是我基于 Faisal 的 StackBlitz 项目创建的现场演示，它使用另一个 SO 问题中引用的 Angular 4：Angular 4 & Material Stepper

为此，我创建了一个全新的 Angular 6 项目，然后在每个 Angular 6 的 Faisal 演示中添加了关键文件，例如将所有“md-”引用更新为“mat-”，另外我添加了实时版本号Angular CDK 和 Angular 材质。

我希望有人觉得这很有帮助。

StackBlitz: angular603-material621-stepper

【讨论】：

【解决方案3】：

您需要升级 Angular.json。运行这些命令就可以了。

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

【讨论】：

【解决方案4】：

npm install @angular/animations@6.0.1 --save --save-exact

编辑：没关系，发现我使用的Ionic版本仍然使用Angular 6，这意味着动画模块需要匹配Angular核心模块的版本号。如果你的核心模块是 6.0.1 版本，你需要用 npm 安装@angular/animations@6.0.1

【讨论】：