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

Question

I get this error when adding animations into my application.

I found: Angular 4 - Import BrowserAnimationsModule or NoopAnimationsModule. I added the entries to systemjs.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'

I added the imports to app.module.ts (root module):

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

@NgModule({
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
    ],
    declarations: [
      ...
    ],
    bootstrap:    [
        AppComponent
    ],
    providers:    [
        ...
    ]
})
export class AppModule { }

And I also installed the animations package:

npm install @angular/animations@latest --save

What might I be missing?

edit: I know this question looks very much like an exact duplicate of the question I linked, which has various answers. Going through them didn't help though, which is why I am asking for something I am overlooking.

edit2: I also checked Importing BrowserAnimationsModule Throws 404 - SystemJS Config Issue? which aimed at the same solutions already named in Angular 4 - Import BrowserAnimationsModule... (above)

edit3: As the comments mentioned: I have imported BrowserModule and BrowserAnimationsModule. The code section above was updated to reflect that.

edit4: As I have the animations in a child module of my application, I tried all three variants: Doing the imports in the root module, importing in the child module and importing in both.

edit5: I checked the package versions with npm outdated and, reading How to update the angular2 version to the latest, found out about this bug: npm update --save duplicates devDependencies as dependencies. I realized I had always been updating my packages with npm update --save, that's why many packages were outdated. Sadly now they are up2date but it's still not working.

Package         Current   Wanted   Latest  Location
@types/jasmine   2.5.36   2.5.36   2.5.52  kidzpointz
@types/node      6.0.78   6.0.78    8.0.1  kidzpointz
jasmine-core      2.4.1    2.4.1    2.6.4  kidzpointz
protractor       4.0.14   4.0.14    5.1.2  kidzpointz
rxjs              5.0.1    5.0.1    5.4.1  kidzpointz
systemjs        0.19.40  0.19.40  0.20.14  kidzpointz
tslint           3.15.1   3.15.1    5.4.3  kidzpointz
typescript        2.4.0    2.4.0    2.3.4  kidzpointz

Answer 1

add below imports your app.module.ts

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

Answer 2

If you use animation in one of your components, you should add an animations extra-property to the @Component decorator.

If, for instance, your component have a slideInDownAnimation constant, as described in the official documentation, you'll have something like this :

// others import ... 
import { slideInDownAnimation } from 'app/animations';

@Component({
    template: `...`,
    animations: [ slideInDownAnimation ] // this line is required
})
export class HeroDetailComponent implements OnInit {
    @HostBinding('@routeAnimation') routeAnimation = true;
    @HostBinding('style.display')   display = 'block';
    @HostBinding('style.position')  position = 'absolute';

    // ...
}

Answer 3

I now understand that the error is thrown not due to the lack of modules importation:

app.module.ts

No need to import BrowserModule and BrowserAnimationsModule in here, if you are using `AppRoutingModule, you can import those later in there (app-routing.module.ts).

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyComponent } from './my/my.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent,
  ],
  imports: [
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyComponent } from './my/my.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/my' },
  { path: 'my', component: MyComponent,
    data: {animation: 'AnimationsPage'}, // to reference later in animations.ts
  }
];

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.ts

As François pointed out, the reference animations: [ slideInAnimation ] is required:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [ slideInAnimation ] // adding the animation name here!
})

export class AppComponent {
  // ...
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData &&
           outlet.activatedRouteData['animation'];
  }
}

animations.ts

import {
  transition,
  trigger,
  // ...
} from '@angular/animations';

export const slideInAnimation = trigger('routeAnimation', [
  transition('* => AnimationsPage', [ // referenced in app-routing.module.ts
  // ...
]);

app.component.html

<!-- ... -->
<section [@routeAnimation]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</section>
<!-- ... -->

So the lack of referencing the animation in the component was the only thing causing the issue for me (since I always included the BrowserAnimationsModule).

Answer 4

I was also continually getting this error after importing BrowserAnimationsModule, and I had also added the animations: [] metadata to my component. I was still getting this error, but it turned out that I had added the animations metadata to the wrong component.

Once I added the animations metadata to the correct component and had correctly imported the BrowserAnimationsModule the error went away.

Obviously you might have already tried this but I just wanted to add this answer so that when someone came to this question trying to figure out their problem (like I did) they might see this answer and double check their code.

Answer 5

Try the old version of @angular/[email protected] which has animations module integrated within in in version 4 above, animations got its own separate module

I tried to use angular-cli, angular2-cli, angular-seed from github in every configuration I was facing the same issue.

So I downloaded the sample code given in documentation and developed my app above it which is working now. Please refer package.json from that example and make necessary changes before working on it.

Answer 6

In my case I had component:

    import { Component, OnInit, AfterViewInit, Inject, ChangeDetectionStrategy } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { animate, state, style, transition, trigger } from '@angular/animations';


@Component({
  selector: 'app-map-show',
  templateUrl: './map-show.component.html',
  styleUrls: ['./map-show.component.css'],
  // changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('slide', [
      state('topState', style({ transform: 'translateY(50%)' })),
      state('bottomState', style({ transform: 'translateY(0)' })),
      transition('* => *', animate(300))
    ])
  ]
})
export class MapShowComponent implements OnInit {....}

Adding also to app.module.ts made the trick:

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

import { AppComponent } from './app.component';
import { MapShowComponent } from './map/map-show/map-show.component';

@NgModule({
  declarations: [
    AppComponent,
    MapShowComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I hope it will be helpful to someone.

Answer 7

I just found that I wrapped the prime ng autocomplete with a div and that error was coming for that reason. I removed the div and it is working fine