版本不兼容是否会阻止我的 Angular CLI 动画工作？答案

【问题标题】：Is a version incompatibility preventing my Angular CLI animations from working?版本不兼容是否会阻止我的 Angular CLI 动画工作？
【发布时间】：2021-09-06 02:14:36
【问题描述】：

我有一个项目要做。我开始工作时已经建立了 Angular 项目。但是，动画似乎无法正常工作。当我放置一个垫输入占位符时，占位符在我开始写入时不会消失。当我放置 mat-select 时，选择不会下拉。

这是我的 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"
  }
}

我尝试了许多版本的依赖项，但似乎没有任何解决问题的方法。有任何想法吗？谢谢

【问题讨论】：

标签： html css angular typescript animation

【解决方案1】：

欢迎来到 SO 社区！为了回答你的问题，我不得不猜测一下，因为你没有向我们提供minimum reproducible example。

通常，为了使角度动画正常工作，您必须包含 BrowserAnimationsModule，如 documentation 所述。

我会这样做：

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 { }

一旦你有了它，你就可以使用 Angular 动画了。请使用上面的链接查看它是如何完全工作的，但基本上，我的预感是你没有包含这个模块，因此你的动画不起作用。我提供的指南是 Angular 官方文档，它应该可以帮助您入门。

【讨论】：