Module not found: Error: node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js'

Question

I downgraded my project angular version 14.0.0 to 13.0.0 for fixing this error Mat Dialog boxes close button is not working on IOS devices

by following the answer from How to downgrade angular version?

But after downgrading when I am trying to run by ng serve iam getting this error

I checked the specified folder there the file asyncToGenerator.js is exists

./node_modules/idb/build/index.js:1:0-211 - Error: Module not found: Error: Can't resolve '/Volumes/Macintosh HD/Users/ravi/Public/new_mob/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in '/Volumes/Macintosh HD/Users/ravi/Public/new_mob/node_modules/idb/build'

i tried

npm install --save-dev @angular-devkit/build-angular

still getting same error

my package.json file is

{
  "name": "new-design",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --poll=2000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-slider/ngx-slider": "^2.0.4",
    "@angular/animations": "^13.0.0",
    "@angular/cdk": "^13.0.0",
    "@angular/common": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/forms": "^13.0.0",
    "@angular/material": "^13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@capacitor/app": "1.1.1",
    "@capacitor/browser": "^4.0.1",
    "@capacitor/camera": "^4.0.1",
    "@capacitor/core": "3.6.0",
    "@capacitor/filesystem": "^4.0.1",
    "@capacitor/geolocation": "^4.0.1",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/status-bar": "1.0.8",
    "@ionic/angular": "^6.1.9",
    "@ionic/pwa-elements": "^3.1.1",
    "@teamhive/lottie-player": "^1.0.0",
    "add": "^2.0.6",
    "angularx-social-login": "^4.1.0",
    "card-validator": "^8.1.1",
    "compressorjs": "^1.1.1",
    "crypto-js": "^4.1.1",
    "firebase": "^9.15.0",
    "html-entities": "^2.3.3",
    "libphonenumber-js": "^1.10.12",
    "ng": "^0.0.0",
    "ngx-cookie-service": "^14.0.1",
    "ngx-device-detector": "^4.0.1",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-webcam": "^0.4.1",
    "rxjs": "~6.6.0",
    "socket.io-client": "^2.5.0",
    "swiper": "^8.4.2",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.3.10",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "13.0",
    "@angular/compiler": "^13.0.0",
    "@angular/compiler-cli": "^13.0.0",
    "@angular/language-service": "^13.0.0",
    "@capacitor/cli": "3.6.0",
    "@ionic/angular-toolkit": "^6.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@types/socket.io-client": "^3.0.0",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "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",
    "typescript": "~4.6.4"
  },
  "description": "An Ionic project"
}

my package.json file before downgrading is

  "name": "new-design",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4200 --poll=2000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-slider/ngx-slider": "^2.0.4",
    "@angular/animations": "^14.2.7",
    "@angular/cdk": "^14.2.7",
    "@angular/common": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/material": "^14.2.7",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@capacitor/app": "1.1.1",
    "@capacitor/browser": "^4.0.1",
    "@capacitor/camera": "^4.0.1",
    "@capacitor/core": "3.6.0",
    "@capacitor/filesystem": "^4.0.1",
    "@capacitor/geolocation": "^4.0.1",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/status-bar": "1.0.8",
    "@ionic/angular": "^6.1.9",
    "@ionic/pwa-elements": "^3.1.1",
    "@teamhive/lottie-player": "^1.0.0",
    "add": "^2.0.6",
    "angularx-social-login": "^4.1.0",
    "apple-signin-auth": "^1.7.5",
    "card-validator": "^8.1.1",
    "compressorjs": "^1.1.1",
    "crypto-js": "^4.1.1",
    "firebase": "^9.15.0",
    "html-entities": "^2.3.3",
    "libphonenumber-js": "^1.10.12",
    "ng": "^0.0.0",
    "ngx-cookie-service": "^14.0.1",
    "ngx-device-detector": "^4.0.1",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-toggle-switch": "^2.0.5",
    "ngx-ui-switch": "^1.6.0",
    "ngx-webcam": "^0.4.1",
    "rxjs": "~6.6.0",
    "scriptjs": "^2.5.9",
    "socket.io-client": "^2.5.0",
    "swiper": "^8.4.2",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.6",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "^14.2.6",
    "@angular/compiler": "^14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@angular/language-service": "^14.0.0",
    "@capacitor/cli": "3.6.0",
    "@ionic/angular-toolkit": "^6.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@types/socket.io-client": "^3.0.0",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "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",
    "typescript": "~4.7.3"
  },
  "description": "An Ionic project"
}

Can someone help me with this?

Answer 1

Although the question is from a while ago, I recently encountered the same issue of not being able to locate @babel/runtime/helpers/esm/asyncToGenerator.js.

I took two steps to resolve it. Firstly, I updated NodeJs, and secondly, I deleted the .angular folder in the project directory.

I suspect that deleting the .angular folder in the project directory was the solution to the problem.