The elusive "AnimationEvent" is nowhere to be found in the realm of Angular 4's '@angular/animations'

Currently on Angular version 4.3.2

Running @angular/cli version 1.2.6

Incorporating TypeScript (v2.4.2) for a specific component that imports

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

Encountering warnings similar to

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

Interestingly, the other functions like animate, state, style, etc. do not trigger any warnings. Upon inspection of the @angular code within node_modules/@angular/animations.d.ts reveals

export * from './public_api';

Further exploration into ./public_api.d.ts exposes

export * from './src/animations';

and ./src/animations.d.ts contains

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';

Additionally, ./animation_event.d.ts defines the interface

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

Interestingly enough, when copying the interface definition directly into my code, the functionality works seamlessly.

This scenario closely resembles numerous other import scenarios I've encountered, however, this is the sole occurrence resulting in warnings.

What steps can be taken to eliminate these warnings without resorting to manually adding the interface definition to my code?

Answer №1

app-module.ts: Have you included the BrowserAnimationsModule module?

Check out the details here in the official documentation.

For a practical demonstration, refer to this Plunker example.

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

If the above steps don't resolve the issue:

  • Take note of how system.config.js is configured in the Plunker environment.
  • You may find additional insights in this GitHub thread.

Remember to share which steps helped fix the problem. Happy coding! ;-)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am unable to utilize Local Storage within NextJS

type merchandiseProps = { merchandises: merchandiseType[]; cart?:string, collection?:string, fallbackData?: any }; const MerchandiseList: FC<merchandiseProps> = ({ merchandises }) => { const [cart, setCart] = useState<merchandiseType ...

How to trigger a subscription in RXJS only when another Observable is not true

Only emit subscription if the other observable is false. Check out this sample code: const loadingSubject$ = new BehaviorSubject<boolean>(false); const valueSubject$ = new BehaviorSubject<string>(''); valueSubject$ .pipe( // a ...

Steps for integrating Google authentication login into Angular 4

Having recently started working with Angular, I am facing an issue while trying to implement Google login. Whenever I click on the button created for the purpose, it does not redirect me to the Google login page and instead shows an error. I am unsure abou ...

Is there a way to alter the stroke color of an SVG icon in Angular 2 or 4 by clicking on it?

Having trouble with this code, can someone provide a solution? This is the SVG icon code: <svg id="Home" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.28 43.49"> <defs> <style> .cls-1{fill:none;stro ...

Tips for utilizing jest.mock following the removal of @types/jest (^jest@24)

After upgrading from version 7 to version 8 of @angular-builders/jest, I followed the instructions provided in the migration guide which advised removing @types/jest since it now comes bundled with Jest v24. Additionally, changes were made to my tsconfig a ...

Use leaflet.js in next js to conceal the remainder of the map surrounding the country

I'm currently facing an issue and would appreciate some assistance. My objective is to display only the map of Cameroon while hiding the other maps. I am utilizing Leaflet in conjunction with Next.js to showcase the map. I came across a helpful page R ...

Acquire information using AngularJS

This is a demonstration of my service: import { Injectable } from '@angular/core'; import { GenericPostService } from 'app/shared/services/generic.post.service'; @Injectable({ providedIn: 'root' }) export class FaqServic ...

Necessitating derived classes to implement methods without making them publicly accessible

I am currently working with the following interface: import * as Bluebird from "bluebird"; import { Article } from '../../Domain/Article/Article'; export interface ITextParsingService { parsedArticle : Article; getText(uri : string) : B ...

Which tools should I combine with Angular for developing both Android and iOS applications?

My primary focus has been on developing web apps using Angular, but now I am interested in creating native Android and iOS apps with Angular. I have heard about using Cordova, Capacitor, and NativeScript for this purpose, as alternatives to Ionic due to pe ...

What are the steps to enable screen sharing within an Electron application?

I am currently working on developing two applications for screen sharing within a LAN setting using Electron, React, and TypeScript. The first app will capture the screen stream and broadcast it via UDP, while the second app, running on multiple devices, w ...

Why isn't my JavaScript variable visible in the HTML code?

I am currently facing an issue with my Angular app where I am trying to display a JavaScript variable in HTML. The variable successfully shows up in an older part of my application, but it fails to do so in the new section. Below is the functional code sn ...

IE11 causing issues with Bootstrap/Angular dropdown functionality

Is there a workaround for the issue with the selected menu item not showing in IE11 for this simple drop-down? <div class="form-group program-container"> <select class="form-control container-fluid" (change)="onChooseMe ...

Unlock the power of Angular Router to execute unique actions with each click

Exclude the route from the button actions: <div *ngFor="let data of allData" routerLink="/view-detail"> <div> <p>{{data.content}}</p> </div> <button>SaveData</button> <button>ApplyData</button> < ...

Angular and Node version discrepancies causing problems

This particular CLI version is designed to work with Angular versions ^11.0.0-next || >=11.0.0 <12.0.0, however an Angular version of 13.0.0 was detected instead. If you need assistance with updating your Angular framework, please refer to the follo ...

Maintaining accurate type-hinting with Typescript's external modules

Before I ask my question, I want to mention that I am utilizing Intellij IDEA. In reference to this inquiry: How do you prevent naming conflicts when external typescript modules do not have a module name? Imagine I have two Rectangle classes in different ...

Determining the appropriate generic type in Typescript

In my code, there is a method designed to extend an existing key-value map with objects of the same type. This can be useful when working with database query results. export function extendWith< T extends { id: string | number }, O = | (T[" ...

How can we create a versatile Action type in typescript that can accommodate varying numbers of arguments and argument types?

When working with Typescript, encountering a duplicate type error can be frustrating. For instance, consider the following code snippet: export type Action<T> = (arg:T) => void export type Action<T1,T2> = (arg1:T1, arg2:T2) => void How c ...

Angular is able to successfully retrieve the current route when it is defined, but

Here's the code snippet I am working with: import { Router } from '@angular/router'; Following that, in my constructor: constructor(router: Router) { console.log(this.router.url); } Upon loading the page, it initially shows the URL a ...

Angular2, Karma: failure requests that are not failing

While working on writing test cases for a modified version of the Angular.io Heroes tutorial, I encountered an interesting issue with one of the components. No matter what I tried, I couldn't get this particular test to fail. Here's an example o ...

Tips for aligning text at the center of a MUI snackbar

I've been attempting to align text in a snackbar center, but so far I haven't had any luck. Can someone please help me with this? Any suggestions or solutions would be greatly appreciated. import Stack from "@mui/material/Stack"; impor ...