'Found the synthetic property @panelState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.'
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
],
...
})
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.
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.