Error: export 'ɵCssKeyframesDriver' (imported as 'ɵCssKeyframesDriver') was not found in '@angular/animations/browser'

Question

将我的 Angular 从 12.0.2 升级到 13.0.3 后一切正常。我试图删除一些未使用的包，例如 jquery，还有一些我不记得的包等等，然后我删除了 node_modules、package-lock.json 和运行 npm i 重新安装所有软件包。在那之后我收到了一堆错误，然后我再次恢复 package.json 并尝试了 npm i 然后我得到了以下错误。而且我无法修复它。

知道我该如何解决这个问题吗？

./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:9-31 - Error: export 'ɵsupportsWebAnimations' (imported as 'ɵsupportsWebAnimations') was not found in '@angular/animations/browser' (possible exports: AnimationDriver, ɵAnimation, ɵAnimationEngine, ɵAnimationStyleNormalizer, ɵNoopAnimationDriver, ɵNoopAnimationStyleNormalizer, ɵWebAnimationsDriver, ɵWebAnimationsPlayer, ɵWebAnimationsStyleNormalizer, ɵallowPreviousPlayerStylesMerge, ɵcontainsElement, ɵinvokeQuery, ɵvalidateStyleProperty)

./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:69-88 - Error: export 'ɵCssKeyframesDriver' (imported as 'ɵCssKeyframesDriver') was not found in '@angular/animations/browser' (possible exports: AnimationDriver, ɵAnimation, ɵAnimationEngine, ɵAnimationStyleNormalizer, ɵNoopAnimationDriver, ɵNoopAnimationStyleNormalizer, ɵWebAnimationsDriver, ɵWebAnimationsPlayer, ɵWebAnimationsStyleNormalizer, ɵallowPreviousPlayerStylesMerge, ɵcontainsElement, ɵinvokeQuery, ɵvalidateStyleProperty)

package.json

"private": true,
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },
  "dependencies": {
    "@angular-material-components/datetime-picker": "6.0.3",
    "@angular/animations": "^13.0.3",
    "@angular/cdk": "^13.0.3",
    "@angular/common": "13.0.3",
    "@angular/compiler": "13.0.3",
    "@angular/core": "13.0.3",
    "@angular/fire": "^6.1.4",
    "@angular/forms": "13.0.3",
    "@angular/material": "13.0.3",
    "@angular/material-moment-adapter": "13.0.3",
    "@angular/platform-browser": "13.0.3",
    "@angular/platform-browser-dynamic": "13.0.3",
    "@angular/platform-server": "13.0.3",
    "@angular/router": "13.0.3",
    "@nguniversal/express-engine": "^12.0.0",
    "bootstrap": "^5.1.3",
    "crypto-js": "4.0.0",
    "domino": "^2.1.6",
    "express": "^4.15.2",
    "firebase": "^8.10.0",
    "highlight.js": "10.7.2",
    "lodash-es": "4.17.21",
    "moment": "^2.29.1",
    "ngx-moment": "^5.0.0",
    "node-fetch": "^2.6.1",
    "rrule": "2.6.8",
    "rxjs": "7.1.0",
    "tslib": "2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.0.3",
    "@angular/cli": "13.0.3",
    "@angular/compiler-cli": "13.0.3",
    "@angular/language-service": "13.0.3",
    "@nguniversal/builders": "^12.0.0",
    "@ngx-builders/analyze": "^2.3.0",
    "@types/crypto-js": "4.0.1",
    "@types/express": "^4.17.0",
    "@types/highlight.js": "9.12.4",
    "@types/jasmine": "3.6.10",
    "@types/jasminewd2": "2.0.8",
    "@types/lodash-es": "4.17.4",
    "@types/node": "15.0.1",
    "bufferutil": "^4.0.3",
    "codelyzer": "6.0.2",
    "jasmine-core": "3.7.1",
    "jasmine-spec-reporter": "7.0.0",
    "karma": "6.3.2",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.5.4",
    "ngx-owl-carousel-o": "^6.0.0",
    "protractor": "7.0.0",
    "tailwindcss": "2.1.2",
    "ts-node": "9.1.1",
    "tslint": "6.1.2",
    "typescript": "~4.4.0",
    "utf-8-validate": "^5.0.5",
    "ws": "^8.2.2",
    "xhr2": "^0.2.1"
  }
}

我发现问题出在

@angular/animations 包。

当我删除它并从我的旧 backup 手动添加该包时，它工作正常。

ng-project/node_modules/@angular/animations

我从我的备份中完全替换了这个文件夹，它无需重新编译就可以工作。

同样，如果我运行 npm install 它不会工作。帮我理解一下。

Answer 1

我进行了大量研究，但没有找到解决此问题的方法，因为它只发生在较新版本的动画包上。

我尝试了以下版本：

13.2.4（最新的）抛出相同的 es 错误
13.2.3 抛出相同的 es 错误
13.2.2 抛出相同的 es 错误
13.2.1 抛出相同的 es 错误
13.2.0 正常工作。

所以我认为对于临时修复，您应该通过指向此 npm 的特定版本来更新您的 package.json，如下所示。

"@angular/animations": "13.2.0"

此版本或更低版本不会引发任何错误，所有较新版本都有 ɵsupportsWebAnimations 问题。

问题编号：https://github.com/angular/angular/issues/45191

编辑：

如果有人想要一个合适的解决方案并想要最新版本的 @angular/animations 那么他们需要与其他 Angular 框架包的版本完全相同 通过 ng update 这样一旦所有核心 Angular 框架包都与同一版本匹配，您将不会再看到上述错误，并且可以毫无错误地构建您的应用程序。

Answer 2

我也遇到了这个问题，我尝试了所有可能的解决方案，但没有奏效。

然后我变了

"@angular/animations": "^13.0.2", 到 "@angular/animations": "~13.0.2", 在我的 package.json 文件中

我的 npm i 成功了。

Error: export 'ɵCssKeyframesDriver' (imported as 'ɵCssKeyframesDriver') was not found in '@angular/animations/browser'

Error: export 'ɵCssKeyframesDriver' (imported as 'ɵCssKeyframesDriver') was not found in '@angular/animations/browser'

angular

angular-animations