TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) for effects, selectors, services [Angular 11]

Question

After upgrading from angular 8 to angular 11(with ngrx update from 6 to 10) getting this error. If I comment out a file I will get error for some another file.

Even if I keep a blank effect file or service file then also it gives error on the first line i.e. export class... or @injectable

On the selectors getting error on the last line ie. closing brackets.

Note: I have circular dependency warning present as shown below:

Warning: Circular dependency detected:
src\app\modules\login\components\index.ts -> src\app\modules\login\components\index.ts

Warning: Circular dependency detected:
src\app\modules\login\layouts\index.ts -> src\app\modules\login\layouts\index.ts

Warning: Circular dependency detected:
src\app\modules\main\components\index.ts -> src\app\modules\main\components\index.ts

Warning: Circular dependency detected:
src\app\modules\main\guards\index.ts -> src\app\modules\main\guards\index.ts

Below are the version details:

   Angular CLI: 11.0.6
Node: 12.18.3
OS: win32 x64

Angular: 11.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.6
@angular-devkit/build-angular   0.1100.6
@angular-devkit/core            11.0.6
@angular-devkit/schematics      11.0.6
@angular/http                   7.2.16
@schematics/angular             11.0.6
@schematics/update              0.1100.6
rxjs                            6.6.3
typescript  

                4.0.5

And here is my package.json

    {
  "name": "",
  "version": "",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "postinstall": "ngcc",
    "start": "ng serve",
    "remote": "ng serve --host 0.0.0.0",
    "build": "ng build --prod",
    "build:analyze": "ng build --prod --stats-json",
    "build:debug": "ng build --prod --optimization=false",
    "lint": "tslint \"src/**/*.ts\"",
  },
  "browser": { "fs": false },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "^11.0.5",
    "@angular/common": "^11.0.5",
    "@angular/compiler": "^11.0.5",
    "@angular/core": "^11.0.5",
    "@angular/forms": "^11.0.5",
    "@angular/http": "^7.2.16",
    "@angular/platform-browser": "^11.0.5",
    "@angular/platform-browser-dynamic": "^11.0.5",
    "@angular/router": "^11.0.5",
    "@ng-bootstrap/ng-bootstrap": "^5.3.1",
    "@ng-idle/core": "^10.0.0-beta.1",
    "@ng-idle/keepalive": "^8.0.0-beta.4",
    "@ngrx/effects": "^10.1.2",
    "@ngrx/store": "^10.1.2",
    "@ngrx/store-devtools": "^10.1.2",
    "@swimlane/ngx-datatable": "^19.0.0",
    "@types/chart.js": "^2.9.29",
    "@types/googlemaps": "^3.43.0",
    "ag-grid-angular": "^23.2.1",
    "ag-grid-community": "^23.2.1",
    "ag-grid-enterprise": "^23.2.1",
    "angular-calendar": "^0.27.21",
    "angular-draggable-droppable": "^4.6.0",
    "angular2-notifications": "^9.0.0",
    "bootstrap": "^4.5.3",
    "chart.js": "^2.9.4",
    "chartjs-plugin-datalabels": "^0.6.0",
    "chartjs-plugin-doughnutlabel": "^2.0.3",
    "clipboard": "^2.0.6",
    "core-js": "^3.8.2",
    "countries-and-timezones": "^2.3.1",
    "date-fns": "^1.30.1",
    "eventsource-polyfill": "^0.9.6",
    "favico.js-slevomat": "^0.3.11",
    "focus-trap": "2.3.0",
    "font-awesome": "^4.7.0",
    "font-awesome-animation": "^0.2.1",
    "html2canvas": "^1.0.0-rc.7",
    "jquery": "^3.5.1",
    "minimatch": "^3.0.4",
    "moment": "^2.29.1",
    "ng2-file-upload": "^1.4.0",
    "ng2-pdf-viewer": "^6.3.2",
    "ngx-chips": "^2.2.2",
    "ngx-pipes": "^2.7.5",
    "ngx-quill": "^5.2.0",
    "ngx-slimscroll": "^11.0.0",
    "ngx-socket-io": "^3.2.0",
    "oboe": "^2.1.5",
    "path": "^0.12.7",
    "quill": "^1.3.7",
    "rxjs": "^6.6.3",
    "tslib": "^2.1.0",
    "twilio-video": "^2.10.0",
    "ua-parser-js": "^0.7.23",
    "web-animations-js": "^2.3.2",
    "xlsx": "^0.16.9",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1100.5",
    "@angular/cli": "^11.0.5",
    "@angular/compiler-cli": "^11.0.5",
    "@angular/language-service": "^11.0.5",
    "@angular/localize": "^11.0.5",
    "@types/jasmine": "^2.8.17",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^14.14.20",
    "codelyzer": "^5.1.2",
    "html-dnd": "^1.2.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "protractor-beautiful-reporter": "^1.3.6",
    "ts-node": "~5.0.1",
    "tslint": "~6.1.0",
    "typescript": "^4.0.5"
  }
}

Answer 1

I had this problem after updating version 10 to angular version 11 and I noticed that the @angular/compiler-cli and @angular/language-cli in devDependence not old have been updated.

After equalizing the devDependencies with the project dependencies the problem was solved for me

npm install @angular/[email protected] --save-dev
npm install @angular/[email protected] --save-dev