Is a version incompatibility preventing my Angular CLI animations from working? - html

Question

I have a project to do. The Angular project was already set up when I started working. However, the animations do not seem to work properly. When I put a mat input placeholder, the placeholder doesn't disappear when I start writing in it. When I put a mat-select, the select doesn't drop down.
There's my package.json:
{
"name": "projetwifi-dashboard",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"serve": "ng serve --configuration=dev",
"start": "node server.js",
"build": "ng build",
"build:dev": "ng build --prod --configuration=dev",
"build:accept": "ng build --prod --configuration=accept",
"build:prod": "ng build --prod --configuration=production",
"test": "ng test",
"test:ci": "ng test --code-coverage=true --watch=false",
"lint": "ng lint && prettier -l \"**/*.ts\"",
"lint-fix": "ng lint --fix && prettier \"**/*.ts\" --write",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~10.2.0",
"#angular/cdk": "^12.0.0",
"#angular/common": "~10.2.0",
"#angular/compiler": "^10.2.5",
"#angular/core": "~10.2.0",
"#angular/forms": "~10.2.0",
"#angular/material": "^10.2.7",
"#angular/platform-browser": "~10.2.0",
"#angular/platform-browser-dynamic": "~10.2.0",
"#angular/router": "~10.2.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-prom-bundle": "^6.2.0",
"googleapis": "^74.2.0",
"prom-client": "^12.0.0",
"puppeteer": "^5.4.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1002.3",
"#angular/cli": "~10.2.0",
"#angular/compiler-cli": "^10.2.5",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}
I have tried many version of the dependencies but nothing seems to resolve the problem. Any ideas? Thanks

Answer 1

welcome to the SO community! In order to answer your question, I'm gonna have to take a guess, since you didn't provide us with a minimum reproducible example.
Usually, in order for angular animations to work, you have to include BrowserAnimationsModule as stated by the documentation.
Here's how I would do that:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule
],
declarations: [ ],
bootstrap: [ ]
})
export class AppModule { }
Once you have that, you'll be able to work with Angular animations. Please use the link above to see how it fully works, but essentially, my hunch is that you didn't include this module and hence, your animations don't work. The guide I've given is the official Angular documentation, and it should help you get started.