Angular 15 ng serve error with ANIMATION_MODULE_TYPE
Asked Answered
T

3

5

As the title says. I've been struggling with this error for hours. Like 30 files print this when I try ng serve:

./node_modules/@angular/material/fesm2020/button.mjs:239:156-177 - Error: export 'ANIMATION_MODULE_TYPE' (imported as 'ANIMATION_MODULE_TYPE') was not found in '@angular/platform-browser/animations' (possible exports: BrowserAnimationsModule, N
oopAnimationsModule, provideAnimations, provideNoopAnimations, ɵAnimationRenderer, ɵAnimationRendererFactory, ɵBrowserAnimationBuilder, ɵBrowserAnimationFactory, ɵInjectableAnimationEngine)
{
  "name": "ProjectName",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "test": "ng test",
    "start": "ng serve --port 4321 --host 0.0.0.0 --configuration develop --disable-host-check true ",
    "build": "ng build --configuration production --cross-origin 'use-credentials' --output-path './dist' --progress=false --source-map=false --delete-output-path=true",
    "build.demo": "ng build --configuration demo --cross-origin 'use-credentials' --output-path './dist' --progress=false --source-map=false --delete-output-path=true",
    "docker-build": "docker build -f dockerFiles/Dockerfile -t OF_AT .",
    "setBuildTime": "date -u +\"%s\" > src/assets/timestamp.txt",
    "tailwind": "npx tailwindcss -i ./src/styles/styles.css -o ../dist/styles.css --watch",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "15.2.4",
    "@angular/animations": "15.2.4",
    "@angular/cdk": "15.2.4",
    "@angular/common": "15.2.4",
    "@angular/compiler": "15.2.4",
    "@angular/core": "15.2.4",
    "@angular/forms": "15.2.4",
    "@angular/material": "15.2.4",
    "@angular/platform-browser": "15.2.4",
    "@angular/platform-browser-dynamic": "15.2.4",
    "@angular/platform-server": "15.2.4",
    "@angular/router": "15.2.4",
    "@material-design-icons/font": "0.14.2",
    "@ngx-translate/core": "14.0.0",
    "@ngx-translate/http-loader": "7.0.0",
    "date-fns": "2.29.3",
    "file-saver": "2.0.5",
    "http-server": "14.1.1",
    "material-design-icons": "3.0.1",
    "messageformat": "2.3.0",
    "ngx-image-cropper": "6.3.2",
    "ng-gallery": "8.0.3",
    "ngx-toastr": "16.0.2",
    "ngx-translate-messageformat-compiler": "6.2.0",
    "ngx-translate-multi-http-loader": "3.0.0",
    "ngx-webstorage-service": "5.0.0",
    "rxjs": "7.8.0",
    "rxjs-compat": "6.6.7",
    "sass": "1.57.1",
    "tslib": "2.4.1",
    "zone.js": "0.11.8"
  },
  "devDependencies": {
    "@angular-eslint/builder": "15.2.1",
    "@angular-eslint/eslint-plugin": "15.2.1",
    "@angular-eslint/eslint-plugin-template": "15.2.1",
    "@angular-eslint/schematics": "15.2.1",
    "@angular-eslint/template-parser": "15.2.1",
    "@angular/cli": "15.2.4",
    "@angular/compiler-cli": "15.2.4",
    "@angular/language-service": "15.2.4",
    "@types/file-saver": "2.0.5",
    "@types/jasmine": "3.10.7",
    "@types/jasminewd2": "2.0.10",
    "@types/node": "12.20.55",
    "@typescript-eslint/eslint-plugin": "5.48.2",
    "@typescript-eslint/parser": "5.48.2",
    "eslint": "8.36.0",
    "eslint-config-prettier": "8.8.0",
    "jasmine-browser-runner": "1.3.0",
    "jasmine-core": "4.5.0",
    "karma": "6.4.1",
    "karma-chrome-launcher": "3.1.1",
    "karma-coverage": "2.2.0",
    "karma-jasmine": "4.0.2",
    "karma-jasmine-html-reporter": "1.7.0",
    "prettier": "2.5.1",
    "tailwindcss": "3.2.4",
    "ts-node": "7.0.1",
    "typescript": "4.9.4"
  },
  "browser": {
    "crypto": false
  }
}

I've tried to add noopanimationsmodule in app module, clean cache, restart editor, delete node_modules and reisntalling, checked the package file. None and the combination of any of these solutions worked.

Tetrastich answered 21/4, 2023 at 12:19 Comment(1)
We started getting this error on an Angular 14 project...but only on a new Developer's machine. Did you ever find a root cause/solution?Sheeb
K
5

Deleting the .angular folder and re-serving the application helped in my case.

Kalisz answered 25/3 at 8:53 Comment(0)
V
2

This helped me solve the same problem:

ng cache disable


ng cache off

And after that

ng serve

Hope it will help!

Vaientina answered 5/9, 2023 at 13:23 Comment(0)
A
1

ng cache clean was the solution for me on the machine:

Angular CLI: 16.0.6
Node: 20.11.1
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 16.2.8

After cleaning the cache I could successfully run ng serve

Ascending answered 16/4 at 20:20 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.