angular - Får fel vid sidladdning, Den angivna animationstriggaren "animate" har inte registrerats

Jag har precis uppdaterat mitt webbapplikationsprojekt från Angular 4 till Angular 7, och jag stöter på problem med animationstriggen vid sidladdning (ngOnInit-metoden). Jag behöver stödja samma animationseffekter som fanns i Angular 4 med Angular 7.

Jag har lagt till Trigger i min app.module.ts men jag kunde fortfarande inte lösa felet

Angular 4

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

.ts-fil

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

.html-fil

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

Angular 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>

Det faktiska felmeddelandet jag fick är

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)

Svar #1

Din trigger kallas bounce (som du definierade den,

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

), så din div bör istället se ut så här <div [@bounce]="'zoomIn'"></div>.

Prova detta, låt mig veta om det fortfarande ger dig problem.

Relaterade artiklar