Primeng: PrimeNG 4.0.0-rc.1 error: Found the synthetic property @dialogState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application

[mustafaekim]

Just upgraded to Angular 4.0.0 and primeng 4.0.0-rc.1.

I am getting the error below:

ERROR Error: Found the synthetic property @dialogState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. at checkNoSyntheticProp (dom_renderer.ts:368) [angular] at DefaultDomRenderer2.setProperty (dom_renderer.ts:311) [angular] at DebugRenderer2.setProperty (services.ts:883) [angular] at setElementProperty (ng_content.ts:1) [angular] at checkAndUpdateElementValue (element.ts:310) [angular] at checkAndUpdateElementInline (element.ts:208) [angular] at checkAndUpdateNodeInline (view.ts:448) [angular] at checkAndUpdateNode (view.ts:416) [angular] at debugCheckAndUpdateNode (services.ts:235) [angular] at debugCheckRenderNodeFn (services.ts:328) [angular] at Object.eval [as updateRenderer] (ConfirmDialog.html:2) [angular] at Object.debugUpdateRenderer [as updateRenderer] (services.ts:307) [angular] at checkAndUpdateView (view.ts:391) [angular] at callViewAction (view.ts:699) [angular]

[mustafaekim]

fixed by:

If you rely on Animations you’ll also need to install the animations package @angular/animations and import the new BrowserAnimationsModule from @angular/platform-browser/animations in your root NgModule.

[cmargulhano]

I'm too ...

[pavel-sindelka]

@mustafaekim Where to import BrowserAnimationsModule in this project please?
https://github.com/pavel-sindelka/astronauts

I try import it in app.module.ts but still not works.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

import {AppComponent} from './app.component';
import {routing} from './app.router';
import {SharedModule} from './shared/shared.module';
import {AstronautsService} from './astronauts/astronauts.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    SharedModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [
    AstronautsService
  ],
  bootstrap: [
    AppComponent
  ]
})

export class AppModule {
}

[ctrl-brk]

@pavel-sindelka works for me

[pavel-sindelka]

@ctrl-brk Yes it works :)

[cagataycivici]

You need to import animations module, please review changelog of Angular, animations have their own module now.

[stirumala76]

In order to support Angular v4 animations you should:
Install animations npm install @angular/animations --save
Add import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; and import in root NgModule

[elmoyeldo]

Had same issue.. got resolved with import of import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

[petersgiles]

I use angular-cli here's how I fixed it

console window

npm install --save @angular/animations@latest

and at the top of app.module.ts

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

and then in the @NgModule part of app.module.ts

@NgModule({
  declarations: [ ... ],
  imports: [
    ...
    BrowserAnimationsModule, \\ <-include this
  ],
  providers: [... ],
  bootstrap: [...]
})

[guntram]

But it is possible to put it into a different module than app.module right?!

I put it into a module keeping ui stuff together so we do not need to import everything, because the app.module grows steadily enough.

```import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {DataTableModule} from "primeng/primeng";
import {CheckboxModule} from "primeng/primeng";
import {ButtonModule} from "primeng/primeng";
import {CalendarModule} from "primeng/primeng";
@NgModule({
imports: [
CommonModule,
BrowserAnimationsModule,
DataTableModule,
CheckboxModule,
ButtonModule,
CalendarModule
],
declarations: [],
exports: [
DataTableModule,
CheckboxModule,
ButtonModule,
CalendarModule
]
})
export class AppPrimeNGModule { }

and then import this module into app.module...

[tranbenoit]

Do not forget to add those lines in systemjs.config.js :
'@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',

Found here : https://github.com/mgechev/angular-seed/issues/1880

[ahelord]

@mustafaekim work for me thanks .

[rjsteinert]

My issue was that this was causing tests to fail. It should be noted that if you are going to use the BrowserAnimationsModule in a component that you have to also have to NgModule import that in your component's spec file.

In my case...

import { TangerineFormCardComponent } from './tangerine-form-card.component';
import { TangerineFormsModule } from '../../tangerine-forms.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

describe('TangerineFormCardComponent', () => {
  let component: TangerineFormCardComponent;
  let fixture: ComponentFixture<TangerineFormCardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        TangerineFormsModule,
        BrowserAnimationsModule
        ]
    })
    .compileComponents();
  }))

[bobKasbi]

@rjsteinert: true. This did solve the issue from my side. Thanks!

[ShaileshBhatNP]

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