TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) for effects, sel

Posted 2023-02-19

【中文标题】TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) for effects, selectors, services [Angular 11]

【英文标题】：

【发布时间】：2021-04-15 14:01:45

【问题描述】：

从 angular 8 升级到 angular 11（ngrx 从 6 更新到 10）后出现此错误。如果我注释掉一个文件，我会收到另一个文件的错误。

即使我保留一个空白的效果文件或服务文件，它也会在第一行给出错误，即导出类...或@injectable

在最后一行出现错误的选择器上，即。右括号。

注意：我有如下所示的循环依赖警告：

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

以下是版本详情：

   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

这是我的 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"
  

【问题讨论】：

您找到解决此问题的方法了吗？

对我来说，这是由于安装的 twilio-video npm 软件包具有旧版本。包更新后解决了

【参考方案1】：

我在将版本 10 更新到 Angular 版本 11 后遇到了这个问题，我注意到 devDependence 中的 @angular/compiler-cli 和 @angular/language-cli 不是旧的已经更新了。

在将 devDependencies 与项目 dependencies 平衡后，我的问题就解决了

npm install @angular/language-service@11.2.10 --save-dev
npm install @angular/compiler-cli@11.2.10 --save-dev