错误：在“@angular/animations/browser”中找不到导出“？CssKeyframesDriver”（导入为“？CssKeyframesDriver”）

Question

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

\n

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

\n

./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:9-31 - Error: export \'\xc9\xb5supportsWebAnimations\' (imported as \'\xc9\xb5supportsWebAnimations\') was not found in \'@angular/animations/browser\' (possible exports: AnimationDriver, \xc9\xb5Animation, \xc9\xb5AnimationEngine, \xc9\xb5AnimationStyleNormalizer, \xc9\xb5NoopAnimationDriver, \xc9\xb5NoopAnimationStyleNormalizer, \xc9\xb5WebAnimationsDriver, \xc9\xb5WebAnimationsPlayer, \xc9\xb5WebAnimationsStyleNormalizer, \xc9\xb5allowPreviousPlayerStylesMerge, \xc9\xb5containsElement, \xc9\xb5invokeQuery, \xc9\xb5validateStyleProperty)\n\n./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:69-88 - Error: export \'\xc9\xb5CssKeyframesDriver\' (imported as \'\xc9\xb5CssKeyframesDriver\') was not found in \'@angular/animations/browser\' (possible exports: AnimationDriver, \xc9\xb5Animation, \xc9\xb5AnimationEngine, \xc9\xb5AnimationStyleNormalizer, \xc9\xb5NoopAnimationDriver, \xc9\xb5NoopAnimationStyleNormalizer, \xc9\xb5WebAnimationsDriver, \xc9\xb5WebAnimationsPlayer, \xc9\xb5WebAnimationsStyleNormalizer, \xc9\xb5allowPreviousPlayerStylesMerge, \xc9\xb5containsElement, \xc9\xb5invokeQuery, \xc9\xb5validateStyleProperty)\n

\n

包.json

\n

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

\n

---

\n

我发现问题在于

\n

@angular/animations包裹。

\n

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

\n

ng-project/node_modules/@angular/animations

\n

我从备份中完全替换了该文件夹，并且无需重新编译即可运行。

\n

再次，如果我运行npm install它将无法工作。在这里帮我理解一下。

\n

Answer 1

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

\n

我尝试了以下版本：

\n

\n

• 13.2.4（最新）抛出相同的 es 错误

  \n
\n

• 13.2.3 抛出相同的 es 错误

  \n
\n

• 13.2.2 抛出相同的 es 错误

  \n
\n

• 13.2.1 抛出相同的 es 错误

  \n
\n

• 13.2.0 工作无错误。

  \n
\n

\n

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

\n

"@angular/animations": "13.2.0"\n

\n

此版本或更低版本不会引发任何错误，所有较新的版本都会出现此\xc9\xb5supportsWebAnimations问题。

\n

问题参考： https: //github.com/angular/angular/issues/45191

\n

编辑：

\n

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

\n