26

I'm having a problem when I launch my Angular app on my browser. Everything works code speaking but I'm still getting this error:

Found the synthetic property @routerAnimations. Please include either BrowserAnimationsModule or NoopAnimationsModule in your application.

I already checked the posts on this subject and there's quite a lot but all of them answered the same:

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

and include it in the app module's imports.

imports: [
    BrowserAnimationsModule,
    ... 
]

That's what I did but still got the same error. I've been looking for hours for this solution. Anyone knows what could fix it ? Thanks

Here's my package.json:

{
  "name": "angular-bc",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.3",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Components : copied from answer

<div [@routerAnimations]="myOutlet.state">
    <router-outlet #myOutlet></router-outlet>
</div>
11
  • 1
    you also need to add the BrowserModule have you Commented Oct 11, 2017 at 8:10
  • Yes I did, it's already there when you generate the project with angular-cli Commented Oct 11, 2017 at 8:12
  • check if you have animations installed in your package.json Commented Oct 11, 2017 at 8:13
  • Yes sir it's there, to be sure i even deleted the node_modules folder and ran "npm install" Commented Oct 11, 2017 at 8:15
  • can you please add your package.json and no sir please Commented Oct 11, 2017 at 8:17

5 Answers 5

37

Adding the lines

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

and

imports: [
    BrowserAnimationsModule,
    ... 
]

to app.module.ts actually solves it

0
9

In my case I'm using Angular 17 in mode: standalone. To solve the problem a use the flowing script in the main.ts file, based on the link: https://angular.io/guide/animations

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
  ]
});

Hope this script be helpful for someone.

1
  • For this to work, in the same file you need to add import { provideAnimations } from '@angular/platform-browser/animations' ;
    – n1cK
    Commented Jul 14 at 10:59
2

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

2

Sidenav won't work unless you import BrowserAnimationsModule. So import it from '@angular/platform-browser/animations'.

-12

I solved the issue, the problem was the "@routerAnimations" in my app.component.html:

<div [@routerAnimations]="myOutlet.state">
    <router-outlet #myOutlet></router-outlet>
</div>

When I removed it, everything worked just fine

1
  • 3
    removing synthetic property do not solve your actual issue. since, you need that, hence, you added BrowserAnimationsModule at first place. Commented Aug 15, 2020 at 10:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.