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 eitherBrowserAnimationsModule
orNoopAnimationsModule
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"
}
}
<div [@routerAnimations]="myOutlet.state">
<router-outlet #myOutlet></router-outlet>
</div>
Perform below steps to make it work: npm install @angular/animations@latest --save. import "BrowserAnimationsModule" from "@angular/platform-browser/animations" in your root NgModule (Without this, your code will compile and run, but animations will trigger an error)
It is a utility module that mocks the real animation module but doesn't actually animate. This can be handy on platforms where animation would be too slow, or for testing (unit, integration, e2e with Cypress, Protractor, ...) , if animation isn't involved in what you actually want to test.
Adding the lines
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
and
imports: [
BrowserAnimationsModule,
...
]
to app.module.ts
actually solves it
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With