233

I upgraded an Angular 4 project using angular-seed and now get the error

Found the synthetic property @panelState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

Screenshot of error

How can I fix this? What exactly is the error message telling me?

2

19 Answers 19

351

Make sure the @angular/animations package is installed (e.g. by running npm install @angular/animations). Then, in your app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...,
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})
5
  • How can I check whether it is installed on PC or not.? Commented Dec 26, 2017 at 6:07
  • 4
    npm list --depth=0 lists the installed packages on your project
    – Ploppy
    Commented Dec 26, 2017 at 13:21
  • 1
    What is the expected result if already installed.? i can only see these 2: ├── @angular/[email protected] ├── @angular/[email protected] Commented Dec 27, 2017 at 12:26
  • 25
    I have installed all the packages for animation and also imported "BrowserAnimationsModule" in the AppModule. But it's still getting the error.
    – crossRT
    Commented Jun 27, 2018 at 1:22
  • I had to put this import into my main app module, even though the component that I it was being used on was a child submodule.
    – eb80
    Commented Sep 28, 2018 at 19:15
262

This error message is often misleading.

You may have forgotten to import the BrowserAnimationsModule. But that was not my problem. I was importing BrowserAnimationsModule in the root AppModule, as everyone should do.

The problem was something completely unrelated to the module. I was animating an*ngIf in the component template but I had forgotten to mention it in the @Component.animations for the component class.

@Component({
  selector: '...',
  templateUrl: './...',
  animations: [myNgIfAnimation] // <-- Don't forget!
})

If you use an animation in a template, you also must list that animation in the component's animations metadata ... every time.

5
  • You must be using an old version of Angular, the error is different: Error: The provided animation trigger "myAnimation" has not been registered!
    – Ploppy
    Commented Sep 26, 2018 at 10:56
  • Nope. ^6.0.9". Given that I lazy load most of my components, that may be a factor. But I can assure you I get this error when I omit the @Component.animations and it goes away when that declaration is present.
    – Ward
    Commented Sep 27, 2018 at 9:32
  • I recommend you to open an issue on github.
    – Ploppy
    Commented Sep 27, 2018 at 9:48
  • 1
    actually, you need to verify that your app component (the root parent) includes this too
    – Lior
    Commented Nov 28, 2018 at 15:33
  • I experienced this in Ionic while using ionic serve. I think @Component.animations hadn't hot reloaded because it worked after stopping and restarting the local dev server. Commented Feb 25, 2019 at 11:02
31

If anyone is looking for a solution for this when using standalone component Add this to your main.ts file

import { importProvidersFrom } from '@angular/core';

bootstrapApplication(AppComponent,{
  providers:[importProvidersFrom([BrowserAnimationsModule])]
}); 

or use

import { provideAnimations } from '@angular/platform-browser/animations';

 bootstrapApplication(AppComponent, {
        providers: [
          provideAnimations()
        ]
  })

Source:How to add BrowserAnimationsModule or NoopAnimationsModule to Standalone Component?

4
  • I had already tried everything and nothing worked, thank you very much for your help.
    – Esraa_92
    Commented Feb 28 at 10:56
  • Welcome this is also my problem before when it is my first time using angular standalone.
    – Bryan Lim
    Commented Mar 19 at 2:18
  • This solved my problem in Angular 18+ standalone. Commented Jul 1 at 0:11
  • you're my hero, t hank you! Commented Jul 8 at 9:10
19

I ran into similar issues, when I tried to use the BrowserAnimationsModule. Following steps solved my problem:

  1. Delete the node_modules dir
  2. Clear your package cache using npm cache clean
  3. Run one of these two commands listed here to update your existing packages

If you experience a 404 errors like

http://.../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

add following entries to map in your system.config.js:

'@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
'@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js'

naveedahmed1 provided the solution on this github issue.

1
  • as i found out today, this issue only occurs if your project is based on the angular quickstart seed. the new angular cli does not use this kind of config file
    – wodzu
    Commented Jul 12, 2017 at 20:45
8

For me, I missed this statement in @Component decorator: animations: [yourAnimation]

Once I added this statement, errors gone. (Angular 6.x)

1
7

On Angular 17, I had to modify app.config.ts as following:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { importProvidersFrom } from '@angular/core';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    importProvidersFrom([BrowserAnimationsModule])
    ]
};

1
  • 2
    It works on Angular 18.1.4
    – OJVM
    Commented Aug 8 at 22:51
6

After installing an animation module then you create an animation file inside your app folder.

router.animation.ts

import { animate, state, style, transition, trigger } from '@angular/animations';
    export function routerTransition() {
        return slideToTop();
    }

    export function slideToRight() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateX(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
            ])
        ]);
    }

    export function slideToLeft() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateX(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
            ])
        ]);
    }

    export function slideToBottom() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateY(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateY(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(100%)' }))
            ])
        ]);
    }

    export function slideToTop() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateY(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateY(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' }))
            ])
        ]);
    }

Then you import this animation file to your any component.

In your component.ts file

import { routerTransition } from '../../router.animations';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  animations: [routerTransition()]
})

Don't forget to import animation in your app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
5

All I had to do was to install this

npm install @angular/animations@latest --save  

and then import

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 

into your app.module.ts file.

2
  • -1; this mostly just duplicates the accepted answer that was posted a couple of months earlier, but also misses out the step of passing BrowserAnimationsModule to the @NgModule decorator. It's also virtually identical to vikvincer's answer posted a few hours earlier.
    – Mark Amery
    Commented Dec 21, 2017 at 12:26
  • This will install an incompatible version of the package Commented Dec 2, 2022 at 13:08
3

The animation should be applied on the specific component.

EX : Using animation directive in other component and provided in another.

CompA --- @Component ({



animations : [animation] }) CompA --- @Component ({



animations : [animation] <=== this should be provided in used component })

2

My problem was that my @angular/platform-browser was on version 2.3.1

npm install @angular/platform-browser@latest --save

Upgrading to 4.4.6 did the trick and added /animations folder under node_modules/@angular/platform-browser

1
  • And that also ended up upgrading my whole Angular project to 4.4.6 Commented Oct 23, 2017 at 6:33
2

I got below error :

Found the synthetic property @collapse. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

I follow the accepted answer by Ploppy and it resolved my problem.

Here are the steps:

1.
    import { trigger, state, style, transition, animate } from '@angular/animations';
    Or 
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2. Define the same in the import array in the root module.

It will resolve the error. Happy coding!!

2

For me was because I put the animation name inside square brackets.

<div [@animation]></div>

But after I removed the bracket all worked fine:

<div @animation></div>
1

Did not help to do all suggestions from other posts. My problem solved by adding

provideAnimations()

to providers specifically where I have

MatInputModule

module present, not to app root. ( I have standalone root app component).

import { provideAnimations } from '@angular/platform-browser/animations';    
...

@NgModule({
    imports: [ CommonModule, ReactiveFormsModule, MatInputModule],
    providers:    [provideAnimations()],
    ...
})
0

Resolved this error by using provideAnimations() in main.ts instead of in app.config.ts.

main.ts:

import {
  bootstrapApplication,
  provideProtractorTestingSupport,
} from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import routeConfig from './app/routes';
import { provideAnimations } from '@angular/platform-browser/animations';

bootstrapApplication(AppComponent, {
  providers: [
    provideProtractorTestingSupport(),
    provideRouter(routeConfig),
    provideAnimations(),
  ],
}).catch((err) => console.error(err));
-1

A simple solution to this, do not to import BrowserAnimationsModule in your lazyloaded or child module, import only in your AppModule. If you get this same error while you run your component test, add it to your import array in your test bed. Note. This works if you don't have your own defined animations

-2
--
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
---

@NgModule({
  declarations: [   --   ],
  imports: [BrowserAnimationsModule],
  providers: [],
  bootstrap: []
})
3
  • 2
    Please provide an explanation for your code. Posting code on its own doesn't help anyone except OP, and they don't understand why it works (or doesn't).
    – jhpratt
    Commented Sep 6, 2017 at 2:34
  • While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion Commented Sep 6, 2017 at 6:26
  • -1; this just duplicates content from the accepted answer.
    – Mark Amery
    Commented Dec 21, 2017 at 12:35
-3

Try this

npm install @angular/animations@latest --save

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

this works for me.

1
  • -1; this mostly just duplicates the accepted answer that was posted a couple of months earlier, but also misses out the step of passing BrowserAnimationsModule to the @NgModule decorator.
    – Mark Amery
    Commented Dec 21, 2017 at 12:28
-4

Simply add .. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

imports: [ .. BrowserAnimationsModule

],

in app.module.ts file.

make sure you have installed .. npm install @angular/animations@latest --save

1
  • -1 for duplicating content that's already in loads of other answers here.
    – Mark Amery
    Commented Dec 21, 2017 at 12:37
-4

Update for angularJS 4:

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

Solution:

**cli:** (command/terminal)
npm install @angular/animations@latest --save

**systemjs.config.js** (edit file)
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

**app.module.ts** (edit file)
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  imports:      [ BrowserModule,BrowserAnimationsModule ],
...
1
  • 2
    -1; "angularJS 4" is not a thing, and it's unclear what exactly you're trying to express here since you just provide an error message and a hard-to-read code block without so much as a sentence of explanation.
    – Mark Amery
    Commented Dec 21, 2017 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.