CODEWITHSUNDEEP
angulartypescriptanimation
Robert Mitchell
Robert Mitchell

Reputation: 143

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?

Upvotes: 3

Views: 4524

Answers (1)

JGFMK
JGFMK

Reputation: 8904

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. ;-)

Upvotes: 3

Related Questions