web-dev-qa-db-ja.com

angular 6のマテリアルステッパーは機能しません[browser.jsでアニメーションが見つからないメソッド]

私はAngular 6を使用しており、この ガイド の手順に従ってプロジェクトにマテリアルコンポーネントを追加しました。しかし、コードでステッパーコンポーネントを使用すると、コンソールの次の例外：

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
],
angularangular-materialangular-material2angular6
10
أسامة حمدان

angularバージョンとマテリアルバージョンの間に不一致があるようです。必ず、angularを最新のものに更新してください。

6.0.6バージョンに設定してみてください。うまくいくと思います。

8
mohammad

プロジェクトの完全なソースコードにより、誰かがこの問題をより迅速にデバッグできるようになる可能性があることに注意してください。それまでの間、以下はAngular 6およびMaterial Stepperでの作業に役立つ場合があります。

コメントに cRAN が投稿したStackBlitzデモは、ニースの垂直ステッパーデモです。あなたの質問は水平ステッパーを扱っているように見えるので、水平デモも役立つと思うかもしれません。

Angular 6.0.3およびAngular Material 6.2.1で動作するAngular Material Stepperを取得できました。以下は、別のAngularで参照されるSO 4を使用する Faisal によるStackBlitzプロジェクトに基づいて作成したライブデモです。質問： Angular 4＆Material Stepper

このために、新しいAngular 6プロジェクトを作成し、Angular 6ごとにファイサルのデモからキーファイルに追加しました。たとえば、「mat-」へのすべての「md-」参照、 Angular CDKおよびAngular Materialのライブバージョン番号を追加しました。

誰かがこれが役立つことを願っています。

StackBlitz：angle603-material621-stepper

1
RJLyders

angular.jsonをアップグレードする必要があります。これらのコマンドを実行するだけです。

$ ng update @angular/cli
$ ng update @angular/core
$ ng update @angular/material
1
Javid Abdullayev

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

編集：気にしない、Ionic私がまだ使用しているAngular 6、つまり、アニメーションモジュールはangularコアモジュールのバージョン番号コアモジュールがバージョン6.0.1の場合、npmで@ angular/animations @ 6.0.1をインストールする必要があります

0
Vijay Chauhan