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

Question

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.

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

Helped me - https://github.com/mgechev/angular-seed/issues/1880 — FugueWeb, Jun 24 '17 at 12:00
You may refer https://stackoverflow.com/questions/76086234/expected-synthetic-property-transitionmessages-in-angular-15/76927884#76927884 — pawanzZ, Aug 18 '23 at 11:33

score 335 · Accepted Answer · edited Dec 21 '17 at 12:34

335

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
  ],
  ...
})

edited Dec 21 '17 at 12:34

Mark Amery

143,130
81
406
459

answered Apr 05 '17 at 21:25

Ploppy

14,810
6
41
58

How can I check whether it is installed on PC or not.? – Mr world wide Dec 26 '17 at 06:07
3

`npm list --depth=0` lists the installed packages on your project – Ploppy Dec 26 '17 at 13:21
1

What is the expected result if already installed.? i can only see these 2: `├── @angular/platform-browser@4.3.5 ├── @angular/platform-browser-dynamic@4.3.5` – Mr world wide Dec 27 '17 at 12:26
23

I have installed all the packages for animation and also imported "BrowserAnimationsModule" in the AppModule. But it's still getting the error. – crossRT Jun 27 '18 at 01: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 Sep 28 '18 at 19:15

score 256 · Answer 2 · edited Apr 20 '19 at 10:07

256

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.

edited Apr 20 '19 at 10:07

Stefan Falk

23,898
50
191
378

answered Sep 26 '18 at 01:04

Ward

17,793
4
37
53

You must be using an old version of Angular, the error is different: `Error: The provided animation trigger "myAnimation" has not been registered!` – Ploppy Sep 26 '18 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 Sep 27 '18 at 09:32
I recommend you to open an issue on github. – Ploppy Sep 27 '18 at 09:48
1

actually, you need to verify that your app component (the root parent) includes this too – Lior Nov 28 '18 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. – Alex Steinberg Feb 25 '19 at 11:02

score 19 · Answer 3 · answered Apr 06 '17 at 17:06

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

Delete the node_modules dir
Clear your package cache using npm cache clean
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.

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, Jul 12 '17 at 20:45

score 8 · Answer 4 · answered Jul 09 '18 at 08:39

8

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

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

answered Jul 09 '18 at 08:39

Howard

81
1
3

Actually, there is a page about this in [angular documentation](https://angular.io/guide/animations). I should have RTFM – Alexandre Germain Aug 18 '18 at 16:39

score 6 · Answer 5 · answered Sep 13 '18 at 07:12

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

score 5 · Answer 6 · edited Jul 10 '17 at 08:28

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.

edited Jul 10 '17 at 08:28

answered Jun 09 '17 at 17:11

Kofi Sammie

3,237
1
17
17

-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](https://stackoverflow.com/a/44456126/1709587) posted a few hours earlier. – Mark Amery Dec 21 '17 at 12:26
This will install an incompatible version of the package – Olasunkanmi Dec 02 '22 at 13:08

score 3 · Answer 7 · answered Apr 25 '19 at 10:42

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 })

score 2 · Answer 8 · answered Oct 22 '17 at 20:12

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

answered Oct 22 '17 at 20:12

Tanel Jõeäär

548
8
16

And that also ended up upgrading my whole Angular project to 4.4.6 – Tanel Jõeäär Oct 23 '17 at 06:33

score 2 · Answer 9 · answered Oct 17 '18 at 10:25

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

Alessandro_Russo · Answer 10 · 2023-02-03T08:41:35.887

1

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>

edited Feb 03 '23 at 08:41

answered May 27 '20 at 10:44

Alessandro_Russo

1,799
21
34

Olasunkanmi · Answer 11 · 2022-12-03T02:24:54.780

-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

edited Dec 03 '22 at 02:24

answered Dec 02 '22 at 13:33

Olasunkanmi

323
6
18

score -2 · Answer 12 · answered Sep 06 '17 at 02:00

-2

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

@NgModule({
  declarations: [   --   ],
  imports: [BrowserAnimationsModule],
  providers: [],
  bootstrap: []
})

answered Sep 06 '17 at 02:00

Girish

15

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 Sep 06 '17 at 02: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 – Balagurunathan Marimuthu Sep 06 '17 at 06:26
-1; this just duplicates content from the accepted answer. – Mark Amery Dec 21 '17 at 12:35

score -3 · Answer 13 · answered Jun 09 '17 at 11:02

-3

Try this

npm install @angular/animations@latest --save

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

this works for me.

answered Jun 09 '17 at 11:02

vikvincer

639
6
10

-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 Dec 21 '17 at 12:28

score -4 · Answer 14 · answered Aug 28 '17 at 05:18

-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

answered Aug 28 '17 at 05:18

Saurav

392
4
4

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

score -4 · Answer 15 · answered Aug 31 '17 at 11:42

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; "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, Dec 21 '17 at 12:37

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

15 Answers15

Linked