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

Mark Amery · Accepted Answer · 2017-12-21 12:34:58Z

180

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

72.2k36 gold badges278 silver badges324 bronze badges

answered Apr 5 '17 at 21:25

Ploppy

7,4512 gold badges28 silver badges41 bronze badges

How can I check whether it is installed on PC or not.? – Mr world wide Dec 26 '17 at 6:07
2
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
2
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 1:22
@crossRTDid you also import your animation if you created it in a different file? – Ploppy Jun 27 '18 at 8:29

show 3 more comments

displayname · Answer 2 · 2019-04-20 10:07:44Z

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.

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 9:32
Absolutely. But meanwhile, for those stuck as I was and finding only the advice above, my answer gives you one more thing to try. — Ward, Sep 27 '18 at 15:32

wodzu · Answer 3 · 2017-04-06 17:06:28Z

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.

Thanks for this info... I appreciate this is a new release of Angular, but it feels like a never-ending struggle to get around issue after issue, and stumbling across work-arounds like these. It's seriously user-unfriendly stuff. — Mike Gledhill, Jun 16 '17 at 14:19
@MikeGledhill Yup, they have certainly completely sucked at making things easy to upgrade over the past year. It's been a miserable experience. — Jackson Bray, Jul 12 '17 at 20:38
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
I followed these steps and my tests seem to be fine. Thanks! — Mr. D MX, Jul 4 at 23:58

Howard · Answer 4 · 2018-07-09 08:39:56Z

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

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

Actually, there is a page about this in angular documentation. I should have RTFM — Alexandre Germain, Aug 18 '18 at 16:39

SamYah · Answer 5 · 2017-07-10 08:28:48Z

3

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 8:28

user1752532

answered Jun 9 '17 at 17:11

SamYah

1,0837 silver badges9 bronze badges

-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 Dec 21 '17 at 12:26
2
it isnt a duplicate of anyone's answer. my answer is what i did . @NgModule decorator is def correct. virtual identical adds up to conclusive answers ma guy. u didnt need to flag. – SamYah Dec 26 '17 at 16:52

add a comment

Tanel Jõeäär · Answer 6 · 2017-10-22 20:12:05Z

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

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

Chandrahasa Rai · Answer 7 · 2018-09-13 07:12:13Z

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

Trilok Pathak · Answer 8 · 2018-10-17 10:25:29Z

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

Nanda Kishore Allu · Answer 9 · 2019-04-25 10:42:23Z

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

vikvincer · Answer 10 · 2017-06-09 11:02:35Z

Try this

npm install @angular/animations@latest --save

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

this works for me.

-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

Saurav · Answer 11 · 2017-08-28 05:18:09Z

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 for duplicating content that's already in loads of other answers here. — Mark Amery, Dec 21 '17 at 12:37

Eman Jayme · Answer 12 · 2017-08-31 11:42:57Z

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

Girish · Answer 13 · 2017-09-06 02:00:18Z

-3

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

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

answered Sep 6 '17 at 2:00

Girish

13

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

add a comment

You are here

'Found the synthetic property @panelState. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application.' 有大用有大大用

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

13 Answers 正确答案

友情链接

搜索表单

用户登录

You are here

'Found the synthetic property @panelState. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application.' 有大用 有大大用

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

13 Answers 正确答案

友情链接

'Found the synthetic property @panelState. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application.' 有大用有大大用