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.ts

Hi 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.ts

Here goes another one:

Setting display: block; on the child component’s style worked for me. If I remember right, components do not have a default display value.

(Assuming you have already installed @angular/animations e.g. npm install @angular/animations and imported the BrowserAnimationsModule e.g. import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; and added it to your app-module’s imports.)

@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”

"@angular/animations": "^6.0.3",
"@angular/blabla": "^x.x.x",
"jquery": "^3.0.1",                               //<-- note.

after: you change it should look like this

"@angular/animations": "6.0.3",
"@angular/blabla": "x.x.x",
 "jquery": "^3.0.1",                              //<-- do not change.

then delete your ->node_modules folder and run in your terminal

  npm install                                      //do not worry i will put back all deleted modules. 

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

# app.module.ts

//  Base Angular Modules
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CookieService } from 'ngx-cookie-service';

//  services needed for processing
import { UserHistDataService } from './components/main/services/userhist.service';
import { UserDataService } from './components/main/services/user.service';
import { LoggerService } from './components/main/services/logger.service';

//  routing
import { AppComponent } from './components/app/app.component'
import { MainModule } from './components/main/main.module'
import { AppRoutingModule } from './app.routing.module'

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        NgModule,
        BrowserModule,
        BrowserAnimationsModule,
        NoopAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        AppRoutingModule,
        MainModule
    ],
    providers: [
        UserDataService,
        UserHistDataService,
        LoggerService,
        CookieService
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {

}

home.component.ts

//  Base Angular Modules
import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition, query, stagger } from '@angular/animations';

@Component({
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],
    animations: [
        trigger('logoAni', [
            transition('* => *', [
                query(':enter', style({ opacity: 0 }), { optional: true }),
                query(':enter', stagger('100ms', [
                    animate('1s', style({ opacity: 1 }))
                ]), { optional: true })
            ])
        ])
    ]
})

export class HomeComponent implements OnInit {
    clickInfo = 'default';
    logos = [];
    ngOnInit() {
        this.logos = [
            { id: 1, pPath: 'assets/general-dynamics-logo.jpg', altName: "General Dynamics" },
            { id: 2, pPath: 'assets/Liberty-Mutual.png', altName: "Liberty Mutual" },
            { id: 3, pPath: 'assets/mt_logo.png', altName: "MetraTech" },
        ]
    }
}

Have the same error, when use animation inside component. It’s template code:

<character-preview *ngIf="selectedCharacter"
  [selectedCharacter]="selectedCharacter"
  [@fadeAnimation]
></character-preview>

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

@Component({
	selector: 'my-component',
	templateUrl: './my-component.component.html',
	styleUrls: ['./my-component.component.scss'],
	animations: [
		collapseAnimation() <--- Here
	]
})
export class MyComponent ...

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

• same here… only happens in my test after upgrading to Angular 8.2

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:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ChainExpDateMapComponent ],
      imports: [
        NbAccordionModule,
        UVestModule,

        // BrowserAnimationsModule,
      ]
    })
    .compileComponents();
  }));

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

<div [@modalvisibility]="vrb1">
    <element *ngIf="vrb2"></dl-login-screen>    
</div>

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 using AnimationBuilder. 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