Ошибка при загрузке страницы. Предоставленный анимационный триггер "animate" не зарегистрирован.

Question

Я только что обновил проект моего веб-приложения с углового 4 до углового 7, у меня проблемы с триггером анимации при загрузке страницы (метод ngOnInIt). Мне нужно поддерживать те же эффекты анимации, которые преобладали в угловых 4 сугловой 7

Я добавил триггер в свой app.module.ts, но все еще не смог устранить ошибку

угловой 4

import {animateFactory } from 'ack-angular-fx'

.ts Файл

@Component({
   selector: 'abc',
   templateUrl: './abc.component.html',
   styleUrls: ['./abc.component.css'],
   animations: [animateFactory(480, 200, 'ease-in', 100, 'animate')]
})

.html Файл

<div [@animate]="'zoomIn'">
</div>

Угловой 7

.ts

import { trigger, transition, useAnimation } from '@angular/animations';
import { bounce, zoomIn } from 'ngx-animate';

@component({
  animations: [
        trigger('bounce', [transition('* => *', useAnimation(zoomIn))])
    ],
})

.html

<div [@animate]="'zoomIn'"></div>

Фактическое сообщение об ошибке, которое я получил, составляет

Error: The provided animation trigger "animate" has not been registered!
    at AnimationTransitionNamespace.push../node_modules/@angular/animations/fesm5/browser.js.AnimationTransitionNamespace._getTrigger (http://us-test-abc.ils.local:5555/vendor.js:3668:19)
    at AnimationTransitionNamespace.push../node_modules/@angular/animations/fesm5/browser.js.AnimationTransitionNamespace.trigger (http://us-test-abc.ils.local:5555/vendor.js:3675:28)
    at TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.trigger (http://us-test-abc.ils.local:5555/vendor.js:4093:20)
    at InjectableAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.AnimationEngine.process (http://us-test-abc.ils.local:5555/vendor.js:5093:36)
    at AnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.AnimationRenderer.setProperty (http://us-test-abc.ils.local:5555/vendor.js:73490:29)
    at setElementProperty (http://us-test-abc.ils.local:5555/vendor.js:62483:19)
    at checkAndUpdateElementValue (http://us-test-abc.ils.local:5555/vendor.js:62434:13)
    at checkAndUpdateElementInline (http://us-test-abc.ils.local:5555/vendor.js:62383:24)
    at checkAndUpdateNodeInline (http://us-test-abc.ils.local:5555/vendor.js:64732:20)
    at checkAndUpdateNode (http://us-test-abc.ils.local:5555/vendor.js:64698:16)

Answer 1

Ваш триггер называется bounce (как вы его определили,

animations: [
      trigger('bounce', [transition('* => *', useAnimation(zoomIn))])
],

), поэтому ваш div должен выглядеть следующим образом <div [@bounce]="'zoomIn'"></div>.

Попробуйте это,дайте мне знать, если это все еще доставляет вам неприятности.