it-swarm.com.ru

Степпер материала с 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
],
9
أسامة حمدان

Кажется, что есть несоответствие между угловой версией и версией материала .... Пожалуйста, убедитесь, что обновили угловую версию до последней.

попробуйте установить его на 6.0.6 версии, и я думаю, что он будет работать нормально.

7
mohammad

Обратите внимание, что полный исходный код вашего проекта может позволить кому-то помочь быстрее решить эту проблему. Тем временем, следующее может помочь вам работать с Angular 6 и Material Stepper.

Демонстрация StackBlitz, опубликованная cRAN в комментариях, представляет собой демонстрацию Nice вертикального шагового двигателя. Поскольку ваш вопрос, похоже, касается горизонтального степпера, я подумал, что вам также может пригодиться горизонтальная демонстрация.

Я смог заставить Angular Material Stepper работать с Angular 6.0.3 и Angular Material 6.2.1. Ниже приведена живая демонстрация, которую я создал на основе проекта StackBlitz от Faisal , в котором используется Angular 4, на который есть ссылка в другом вопросе SO: Angular 4 & Material Stepper

Для этого я создал совершенно новый проект Angular 6, а затем добавил ключевые файлы из демонстрации Faisal для Angular 6, например, обновил все ссылки "md-" на "mat-", плюс добавил живые номера VERSION для Angular CDK и Угловой Материал.

Я надеюсь, что кто-то найдет это полезным.

StackBlitz: угловой603-материал621-шаговый

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-точный

Правка: Nevermind, обнаружил, что версия Ionic, которую я использую, все еще использует Angular 6, что означает, что модуль анимации должен соответствовать номеру версии углового основного модуля. Если ваш основной модуль версии 6.0.1, вам нужно установить @ angular/animations @ 6.0.1 с npm

0
Vijay Chauhan