web-dev-qa-db-fra.com

Le stepper matériel avec 6 angulaire ne fonctionne pas [méthode d’animation introuvable dans browser.js]

J'utilise Angular 6 et j'ai ajouté les composants matériels à mon projet en suivant les étapes de ce guide Guide . Mais lorsque j'utilise le composant stepper dans mon code, j'obtiens l'exception suivante dans la console:

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

J'ai utilisé le composant comme ceci:

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

et les app.module.ts:

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  RouterModule.forRoot(appRoutes) ,
  FormsModule, HttpClientModule ,
  FormWizardModule ,
  ArchwizardModule,
  MatStepperModule
],
angularangular-materialangular-material2angular6
9
أسامة حمدان

Il semble qu’il existe un décalage entre la version angulaire et la version matérielle .Veuillez vous assurer de mettre à jour la version angulaire au plus tard.

essayez de le mettre à la version 6.0.6 et je pense que cela fonctionnera bien.

7
mohammad

Veuillez noter que le code source complet de votre projet peut permettre à quelqu'un de vous aider à résoudre ce problème plus rapidement. En attendant, les éléments suivants peuvent vous aider à travailler avec Angular 6 et le stepper matériel.

La démo StackBlitz publiée par cRAN dans les commentaires est une démo de Nice vertical stepper. Étant donné que votre question semble concerner un stepper horizontal, j’ai pensé qu’une démo horizontale serait également utile.

J'ai pu faire fonctionner le stepper Material angular avec Angular 6.0.3 et Angular Material 6.2.1. Ce qui suit est une démonstration en direct que j'ai créée à partir du projet StackBlitz de Faisal qui utilise Angular 4 référencé dans une autre question SO: Angular 4 & Material Stepper

Pour cela, j'ai créé un tout nouveau projet Angular 6, puis ajouté aux fichiers clés de la démo de Faisal pour Angular 6, comme la mise à jour de toutes les références "md-" à "mat-", plus des numéros de VERSION en direct pour Angular CDK et Matériau angulaire.

J'espère que quelqu'un trouve cela utile.

StackBlitz: angular603-material621-stepper

1
RJLyders

vous devez mettre à jour Angular.json. Exécutez ces commandes et c'est tout.

$ 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

Edit: Peu importe, j'ai découvert que la version d'Ionic que j'utilise utilise toujours Angular 6, ce qui signifie que le module d'animation doit correspondre au numéro de version du module angulaire. Si votre module principal est la version 6.0.1, vous devez installer @ angular/animations @ 6.0.1 avec npm.

0
Vijay Chauhan