Angular 4 "export 'AnimationEvent' was not found in '@angular/animations'

问题

Angular version 4.3.2

@angular/cli version 1.2.6

I'm using TypeScript (v2.4.2) for a component that imports

import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';

I'm getting warnings that say

"export 'AnimationEvent' was not found in '@angular/animations'

The other functions (animate, state, style, etc.) trigger no warnings. I discovered that the @angular code in node_modules/@angular/animations.d.ts includes

export * from './public_api';

and ./public_api.d.ts has

export * from './src/animations';

and ./src/animations.d.ts has

export { AnimationBuilder, AnimationFactory } from './animation_builder';
export { AnimationEvent } from './animation_event';
export { AUTO_STYLE, AnimateChildOptions, AnimateTimings, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, animate, animateChild, animation, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, ɵStyleData } from './animation_metadata';
export { AnimationPlayer, NoopAnimationPlayer } from './players/animation_player';
export * from './private_export';

and ./animation_event.d.ts has the interface definition

export interface AnimationEvent {
    fromState: string;
    toState: string;
    totalTime: number;
    phaseName: string;
    element: any;
    triggerName: string;
}

If I copy the interface definition into my code everything works fine.

All of this is quite similar to many other imports I've used but this is the only one that generates warnings.

How can I prevent these warnings without copying the interface definition into my code?

回答1:

app-module.ts: Did you import BrowserAnimationsModule?

See here in docs.

Along with a plunker example.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule ],
})

If that doesn't solve it:

Make a note of what system.config.js is doing in the Plunker.
Another related resource is a github issues thread.

Be sure to comment which steps if any fixed it. ;-)

来源：https://stackoverflow.com/questions/45470438/angular-4-export-animationevent-was-not-found-in-angular-animations

标签

angular

typescript

animation