angular: BrowserAnimationsModule not detected even after Import
I’m submitting a…
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
ERROR Error: Found the synthetic property @slideInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
at checkNoSyntheticProp (platform-browser.es5.js:2930)
at EmulatedEncapsulationDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.setProperty (platform-browser.es5.js:2898)
at BaseAnimationRenderer.webpackJsonp.../../../platform-browser/@angular/platform-browser/animations.es5.js.BaseAnimationRenderer.setProperty (animations.es5.js:473)
at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.setProperty (core.es5.js:13738)
at setElementProperty (core.es5.js:9386)
at checkAndUpdateElementValue (core.es5.js:9305)
at checkAndUpdateElementInline (core.es5.js:9239)
at checkAndUpdateNodeInline (core.es5.js:12332)
at checkAndUpdateNode (core.es5.js:12278)
at debugCheckAndUpdateNode (core.es5.js:13139)
Expected behavior
Should run without error.
Minimal reproduction of the problem with instructions
- Imported BrowserAnimationsModule in app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- Added to imports in app.module.ts
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
Ng2SmartTableModule,
TreeModule,
BrowserAnimationsModule
]
- In my nav-bar component:
import { trigger, state, style, transition, animate } from '@angular/animations';
.
.
.
Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.css'],
animations: [
trigger('slideInOut', [
state('in', style({
transform: 'translate3d(0, 0, 0)'
})),
state('out', style({
transform: 'translate3d(100%, 0, 0)'
})),
transition('in => out', animate('400ms ease-in-out')),
transition('out => in', animate('400ms ease-in-out'))
])
]
})
- In the html of the nav-bar:
<button (click)="toggleMenu()" class="hamburger">
<span>Button Text</span>
</button>
What is the motivation / use case for changing the behavior?
It would be nice to have animations?
Environment
Angular version: 4.3.5
Browser:
- [ x] Chrome (desktop) version 59.0.3071.115
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: 6.11.1
- Platform: Windows
Others:
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 37
- Comments: 52 (5 by maintainers)
Do this: import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’; also include in import : [ BrowserAnimationsModule]
I was getting the same error. As @TaylorZaneKirk said, the issue wasn’t the missing import but the missing declaration of the animation in the component. Using RC9
This might help
https://stackoverflow.com/questions/43241193/found-the-synthetic-property-panelstate-please-include-either-browseranimati/43261613
also check if your component includes your animation
@Component({ selector: ‘app-article’, templateUrl: ‘./article.component.html’, styleUrls: [‘./article.component.css’], animations: [routerTransition()] // <-- define your animation here })
Fixed, I made a mistake, because I started again from an empty project and now it’s working.
I am also facing same error even after importing BrowserAnimationsModule.
this is crazy. Import NoopAnimationsModule instead of BrowserAnimationsModule.
import { NoopAnimationsModule } from ‘@angular/platform-browser/animations’;
This solved my problem.
Usually, the solution is to import:
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
after
BrowserModule
in app.module.tsHi guys I fixed this Issue, in your componenet you have to declare the animations. Like this:
animations: [ trigger('dialog', [ transition('void => *', [ style({ transform: 'scale3d(.3, .3, .3)' }), animate(100) ]), transition('* => void', [ animate(100, style({ transform: 'scale3d(.0, .0, .0)' })) ]) ]) ]
if don’t declare animations , don’t use anything of the import so the component doesn’t import the module. At the same time you call this properties with a tag, something like @dialog in the DOM and here is the problem. Regards, Filippo
This error in some cases can be a little bit misleading, I was struggling with the same issue (
Please include either "BrowserAnimationsModule" ...
) until I realized there was an error in animation declaration. When I fixed that it solved the “import problem”. I would recommend making a double check is the animation proper declared.I got the same error while trying Angular Material Table with expanded elements. I fixed it by declaring the missing
animations
property on my component.See line 11
animations
: https://stackblitz.com/angular/lnyxjmgyxvg?file=app%2Ftable-expandable-rows-example.tsHere goes another one:
Setting
display: block;
on the child component’s style worked for me. If I remember right, components do not have a defaultdisplay
value.(Assuming you have already installed
@angular/animations
e.g.npm install @angular/animations
and imported theBrowserAnimationsModule
e.g.import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
and added it to yourapp-module
’simports
.)@Czaste Are you declaring the “showState” trigger on the component’s animations? I can only see the declaration of “logoAni” on your code.
Hie Recurring error in my console first in VScode . ng serve --o .then in chrome console, i had to search and tried may way but these two soved the issue
Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application
You need to import as illustrated
In your C:.…\src\app\app.module.ts
import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’; //<-- copy this.
imports: [ BrowserModule, BrowserAnimationsModule, //<–copy this. LayoutModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule ],
note only 👎 if it fails to solve the err then in your C:.…\package.json
remove all ^ on angular : “^6.0.3”
after: you change it should look like this
then delete your ->node_modules folder and run in your terminal
Also same issue, working on it for a week now with no success. Making every possible ‘change’ based on others past experience. We need something to be done about this, for as stated above, ‘It would be nice to have animations?’
home.component.ts
Have the same error, when use animation inside component. It’s template code:
I faced the same issue, and I turn it out just put the “BrowserAnimationsModule” inside the “imports” of app.module and inside of component, on “animations”, i added
In my case i was using @collapse attribute.
Never mind, I had a directive with a HostListener for ‘@myAnimation.done’ inside a component with out animations metadata for ‘myAnimation’ trigger. The error message could be better though.
Edit: The component with out the animations metadata was not that component I was getting the error on so make sure to look every where.
@lee-merrill + 1
Having the same problem here, with only spec.ts, after upgrading to Angular 8 and changing to use the “materials” library. Whether BrowserAnimationsModule is imported or not in app.module.ts doesn’t seem to matter, I still get “NullInjectorError: No provider for AnimationBuilder!” when I run “ng test” and it tries to test just loading the application. But the application runs just fine via “ng serve”.
I’m having issue, but only with spec.ts. Otherwise, compiles and runs fine in dev and production.
Very sad to see this hasn’t been resolved in years of being here. This is what makes Angular a double-edged sword. You feel very productive, until you run into an issue like this that just becomes a sad time sink. Lighter is better. Adding BrowserAnimationsModule caused Jasmine/Karma to completely blow up, so removed it.
Here’s my module declaration in the spec:
I had the same problem, it was happening because i had this ngIf INSIDE the animation with a true value, while the animation was hidden. removing the ngIf solved errors
Im seeing this same issue but only when bundling with Closure Compiler and @angular 5.2.9. ngc in --watch works fine and BrowserAnimationsModule resolves when requesting the UMD module.
When bundled with Closure Compiler
ERROR Error: Found the synthetic property @@0:register. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
I’m importing
BrowserAnimationsModule
into my app.module and usingAnimationBuilder
. I can post an example repo soon if I cant figure out a fix.Here also same issue. But If I run in VS Code, there is no error. I’m getting the error if I run in Visual Studio IDE. Tried to solve all above solutions. But didn’t work…
Project link In VS Code
Project link in Visual Studio IDE