Material 带 angular 6 的步进器不起作用 [在 browser.js 中找不到动画方法]

Question

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

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
],

Answer 1

angular 版本和 material 版本似乎不匹配。请确保将 angular 更新到最新版本。

尝试设置为6.0.6版本，我觉得应该可以。

Answer 2

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

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

我能够让 Angular Material Stepper 使用 Angular 6.0.3 和 Angular Material 6.2.1。以下是我根据 Faisal that uses Angular 4 referenced in another SO question:

的 StackBlitz 项目创建的现场演示

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

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

StackBlitz: angular603-material621-stepper

Answer 3

您需要升级 Angular.json。运行这些命令就是这样。

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

Answer 4

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

编辑：没关系，发现我用的Ionic版本还是Angular6，也就是说动画模块需要匹配angular核心模块的版本号。如果你的核心模块是6.0.1版本，需要用npm

安装@angular/animations@6.0.1

Material 带 angular 6 的步进器不起作用 [在 browser.js 中找不到动画方法]

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

angular-material

angular-material2

angular

angular6