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

Issue

After upgrading my Angular from 12.0.2 to 13.0.3 everything was working fine. I was trying to remove some packages that was not used such as jquery, and some other i do not remember etc. and after that I deleted node_modules, package-lock.json and run npm i to installed all packages again. After that I recieved bunch of errors which then i again reverted package.json and tried npm i then I am getting below errors. And I am unable to fixed it.

Any idea how can i resolve this ?

./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"
  }
}

---

I see that the issue is with

@angular/animations package.

When I remove that and manually add that package from my old backup it works fine.

ng-project/node_modules/@angular/animations

I replace this folder completely from my backup and it worked without re-compile.

Again if I run npm installit will not work. Help me here to understand.

Solution

As I researched a lot and did not find a solution to this issue as it's occurring only on the newer version of the animation package.

I tried the below versions:

• 13.2.4 (Latest one) throwing same es error

• 13.2.3 throwing same es error

• 13.2.2 throwing same es error

• 13.2.1 throwing same es error

• 13.2.0 working without error.

So I think for a temporary fix you should update your package.json by pointing to a specific version of this npm like below.

"@angular/animations": "13.2.0"

this or lower version will not throw any error and all newer versions have the ɵsupportsWebAnimations issue.

Ref of issue: https://github.com/angular/angular/issues/45191

Edit:

If anyone wants a proper solution and wants the latest version of @angular/animations then they need to be the exact same version as the other Angular framework packages by doing ng update so once all the core Angular framework packages match with the same version you will no longer see the above error and can build your app without error.

Answered By - CodeChanger