Angular 4 - Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application

Adding the lines

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

and

imports: [
    BrowserAnimationsModule,
    ... 
]

to app.module.ts actually solves it


One point is definitely you need to add BrowsersAnimationModule in your active Module. But apart from that you need to mention animations for that Synthetic selector (here @routerAnimations) which is Angular Component Meta

@Component({
  selector: 'app-card-grid',
  templateUrl: './card-grid.component.html',
  styleUrls: ['./card-grid.component.scss'],
  animations: [
    trigger('routerAnimations', [
      state('collapsed', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],

Response in comment if you still have any doubts