Search code examples
node.jsangularherokutypeerror

Angular suddenly stopped working in dev, prod and local with no change, compiles successfully

TypeError: n is not iterable TypeError: n is not iterable

I have an Angular and nodejs project running on heroku. The application was working fine and now all of a sudden I am having Angular building successfully, but get an error once I load the app. The error is minimal and I couldn't find anything online. Any help would be appreciated.

core.js:6210 ERROR Error: Uncaught (in promise): TypeError: n is not iterable
TypeError: n is not iterable

at qe (router.js:3414:30)
at Xe.processChildren (router.js:3293:32)
at Xe.processSegmentGroup (router.js:3263:25)
at Xe.recognize (router.js:3242:31)
at router.js:3216:14
at l.project (router.js:3213:1)
at l._tryNext (mergeMap.js:44:27)
at l._next (mergeMap.js:34:18)
at l.next (Subscriber.js:49:18)
at l._next (tap.js:46:26)
at T (zone-evergreen.js:798:39)
at T (zone-evergreen.js:750:21)
at zone-evergreen.js:860:21
at u.invokeTask (zone-evergreen.js:399:35)
at Object.onInvokeTask (core.js:28567:33)
at u.invokeTask (zone-evergreen.js:398:40)
at s.runTask (zone-evergreen.js:167:51)
at y (zone-evergreen.js:569:39)
at j (polyfill.min.js:6:49500)
at u (polyfill.min.js:6:48005)

The error I get when running it locally is:

core.js:6210 ERROR Error: Uncaught (in promise): TypeError: mergedNodes is not iterable
TypeError: mergedNodes is not iterable
    at mergeEmptyPathMatches (router.js:3414:1)
    at Recognizer.processChildren (router.js:3293:1)
    at Recognizer.processSegmentGroup (router.js:3263:1)
    at Recognizer.recognize (router.js:3242:1)
    at recognize (router.js:3216:1)
    at MergeMapSubscriber.project (router.js:3463:20)
    at MergeMapSubscriber._tryNext (mergeMap.js:44:1)
    at MergeMapSubscriber._next (mergeMap.js:34:1)
    at MergeMapSubscriber.next (Subscriber.js:49:1)
    at TapSubscriber._next (tap.js:46:1)
    at resolvePromise (zone-evergreen.js:798:1)
    at resolvePromise (zone-evergreen.js:750:1)
    at zone-evergreen.js:860:1
    at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
    at Object.onInvokeTask (core.js:28567:1)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398:1)
    at Zone.runTask (zone-evergreen.js:167:1)
    at drainMicroTaskQueue (zone-evergreen.js:569:1)
    at j (polyfill.min.js:6:49500)
    at u (polyfill.min.js:6:48005)

and

Uncaught TypeError: 100,200,201,300,301,302 is not iterable!
    at push.SlkY.module.exports (_for-of.js:14:1)
    at _collection.js:61:1
    at new Set (es6.set.js:8:26)
    at 8Y7J (core.js:152:1)
    at __webpack_require__ (runtime.js:85:30)
    at Object.zUnb (main.ts:1:1)
    at __webpack_require__ (runtime.js:85:30)
    at 0 (alert.component.ts:12:28)
    at __webpack_require__ (runtime.js:85:30)
    at checkDeferredModules (runtime.js:46:23)

and

 Uncaught TypeError: true,1 is not iterable!
    at SlkY.t.exports (_for-of.js:14:42)
    at _collection.js:61:36
    at new <anonymous> (es6.set.js:8:34)
    at Object.fDlF (browser.js:613:29)
    at c (runtime-es2015.efcb1777b316fde67ca4.js:1:552)
    at Object.omvX (animations.js:1:1)
    at c (runtime-es2015.efcb1777b316fde67ca4.js:1:552)
    at 1Xc+ (overlay.js:2956:7)
    at c (runtime-es2015.efcb1777b316fde67ca4.js:1:552)
    at Object.nmIE (subscribeToArray.js:5:16)
SlkY.t.exports @ _for-of.js:14
(anonymous) @ _collection.js:61
(anonymous) @ es6.set.js:8
fDlF @ browser.js:613
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
omvX @ animations.js:1
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
1Xc+ @ overlay.js:2956
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
nmIE @ subscribeToArray.js:5
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
zUnb @ app.component.ts:60
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
0 @ ssr-window.esm.js:147
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
t @ runtime-es2015.efcb1777b316fde67ca4.js:1
r @ runtime-es2015.efcb1777b316fde67ca4.js:1
(anonymous) @ main-es2015.938f4aeb39839be1485f.js:1

the issue might be in core-js:

my package.json file:

{
  "name": "app",
  "version": "2.0.0",
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },
  "scripts": {
    "ng": "ng",
    "main": "server.js",
    "heroku-postbuild": "ng build DineNGo --aot --configuration=${ENV}",
    "preinstall": "npm install --location=global @angular/cli @angular/compiler-cli --legacy-peer-deps",
    "start": "ng serve",
    "cypress:open": "cypress open",
    "swagger": "node ./swagger.js",
    "cypress:run": "cypress run",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^0.1102.19",
    "@angular/animations": "^11.0.6",
    "@angular/cdk": "^11.0.6",
    "@angular/cli": "^11.2.19",
    "@angular/common": "^11.0.6",
    "@angular/compiler": "^11.0.6",
    "@angular/compiler-cli": "^11.2.14",
    "@angular/core": "^11.0.6",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^11.0.6",
    "@angular/language-service": "^11.0.6",
    "@angular/localize": "^11.0.6",
    "@angular/material": "^11.0.6",
    "@angular/platform-browser": "^11.0.6",
    "@angular/platform-browser-dynamic": "^11.0.6",
    "@angular/router": "^11.0.6",
    "@ng-bootstrap/ng-bootstrap": "9.0.2",
    "@ngtools/webpack": "^11.2.19",
    "@ngx-translate/core": "13.0.0",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/chart.js": "^2.7.42",
    "@types/chartist": "^0.9.38",
    "@types/crypto-js": "^3.1.47",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~2.8.22",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "4.14.135",
    "@types/node": "^11.15.54",
    "@types/socket.io": "^3.0.2",
    "@types/socket.io-client": "^3.0.0",
    "@types/uuid": "^8.3.0",
    "@types/w3c-web-usb": "^1.0.10",
    "@types/web-bluetooth": "0.0.4",
    "angular-bootstrap-md": "^11.1.0",
    "angular-cc-library": "^2.1.2",
    "angular-cli-ghpages": "^0.6.2",
    "angular-notifier": "^9.1.0",
    "angular-responsive-carousel": "^2.0.2",
    "angularx-qrcode": "^11.0.0",
    "apexcharts": "^3.44.0",
    "axios": "^1.6.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.5.3",
    "chart.js": "^2.9.4",
    "chartist": "^0.11.4",
    "clover-ecomm-sdk": "^1.0.0",
    "config": "^3.3.6",
    "core-js": "2.5.4",
    "cors": "^2.8.5",
    "crypto": "^1.0.1",
    "crypto-js": "^4.2.0",
    "dotenv": "^6.1.0",
    "exec": "^0.2.1",
    "express": "^4.18.1",
    "express-jwt": "^8.4.1",
    "font-awesome": "^4.7.0",
    "fontawesome": "^5.6.3",
    "fs": "^0.0.1-security",
    "got": "^11.8.1",
    "hammerjs": "^2.0.8",
    "jsonwebtoken": "^9.0.2",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "lz-string": "^1.5.0",
    "material-dashboard": "^2.1.0",
    "material-design-icons": "^3.0.1",
    "material-design-lite": "^1.3.0",
    "mdbootstrap": "^4.19.2",
    "moment": "^2.30.1",
    "mongodb": "^3.0.10",
    "mongoose": "^5.11.15",
    "mongoose-to-swagger": "^1.5.1",
    "ng-apexcharts": "1.5.12",
    "ng-chartist": "^4.1.0",
    "ng-multiselect-dropdown": "^0.2.14",
    "ng-socket-io": "^0.2.4",
    "ngx-autosize": "^1.8.4",
    "ngx-bootstrap": "^6.2.0",
    "ngx-device-detector": "^2.0.0",
    "ngx-guided-tour": "^1.1.11",
    "ngx-infinite-scroll": "^10.0.0",
    "ngx-swiper-wrapper": "^10.0.0",
    "ngx-toastr": "11.1.1",
    "openai": "^4.17.4",
    "path": "^0.12.7",
    "popper.js": "^1.15.0",
    "postcss": "^8.4.14",
    "request-promise": "^4.2.4",
    "resize-base64": "^1.0.12",
    "rootpath": "^0.1.2",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.3.3",
    "socket.io": "^4.6.2",
    "socket.io-client": "^4.6.2",
    "swagger-ui-express": "^5.0.0",
    "time-ago-pipe": "^1.3.2",
    "ts-node": "6.0.0",
    "tslib": "^1.9.0",
    "typescript": "4.1.6",
    "uuid": "^3.3.2",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/core": "^11.0.6",
    "@angular-devkit/schematics": "^11.0.6",
    "codelyzer": "^6.0.2",
    "cypress": "^13.5.0",
    "cypress-cucumber-preprocessor": "^4.3.1",
    "cypress-multi-reporters": "^1.6.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.4.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng2-charts-schematics": "^0.1.7",
    "protractor": "^7.0.0",
    "swagger-autogen": "^2.23.7",
    "swiper": "^6.8.4",
    "tslint": "~6.1.3"
  },
  "engines": {
    "node": "18.18.2",
    "npm": "9.8.1"
  }
}

My package.lock file can be found here: https://drive.google.com/file/d/19xsXokxPTcu5TV7wRX3BGriFZkRii2e1/view?usp=sharing

There seems to be a package updated recently or Angular libraries that is causing this issue because even if I revert back to working builds, it still doesn't work.

only place I see mergenodes which is the error is: enter image description here

Video Of Issue

Solution

  • Removed this from index.html to get it working: <script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>