v9升级后Angular应用程序冻结/无限加载而没有错误

Posted 2023-03-22

【中文标题】v9升级后Angular应用程序冻结/无限加载而没有错误

【英文标题】：Angular app freeze/infinite loading after v9 upgrade without error

【发布时间】：2020-09-13 12:10:07

【问题描述】：

我正在尝试将我的 Angular 应用程序从 8 更新到 9。不幸的是，该应用程序似乎在某些页面上无限期挂起/加载而没有任何错误，因此我无法真正调试它。 当前选项卡变得无响应，我必须使用进程管理器将其关闭。

这是我之前的 package.json

  "name": "web-front",
  "version": "1.0.3",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:package": "node bin/build.js"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "~8.2.8",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.8",
    "@angular/compiler": "~8.2.8",
    "@angular/core": "~8.2.8",
    "@angular/forms": "~8.2.8",
    "@angular/platform-browser": "~8.2.8",
    "@angular/platform-browser-dynamic": "~8.2.8",
    "@angular/router": "~8.2.8",
    "@dagrejs/graphlib": "^2.1.4",
    "@ng-bootstrap/ng-bootstrap": "^5.3.0",
    "@ng-select/ng-select": "^3.7.3",
    "@ngx-translate/core": "11.0.1",
    "@ngx-translate/http-loader": "4.0.0",
    "@swimlane/ngx-charts": "^13.0.2",
    "angular-datatables": "^8.0.0",
    "angular-oauth2-oidc": "8.0.4",
    "angular2-uuid": "^1.1.1",
    "bootstrap": "^4.3.1",
    "chroma-js": "^2.0.6",
    "d3": "^5.12.0",
    "d3-simple-slider": "^1.5.4",
    "datatables.net": "^1.10.20",
    "datatables.net-dt": "^1.10.20",
    "humanize-duration": "^3.22.0",
    "install": "^0.13.0",
    "jointjs": "^3.0.4",
    "moment": "^2.24.0",
    "ng-sidebar": "^9.2.0",
    "ngx-slick-carousel": "^0.4.6",
    "ngx-spinner": "^8.0.3",
    "ngx-toastr": "^11.3.3",
    "primeicons": "^2.0.0",
    "primeng": "^8.0.4",
    "retina-dom-to-image": "^2.5.6",
    "rxjs": "~6.5.3",
    "slick-carousel": "^1.8.1",
    "svg-pan-zoom": "^3.6.1",
    "tslib": "^1.11.1",
    "underscore": "^1.10.2",
    "zone.js": "^0.10.2"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "^0.803.25",
    "@angular/cli": "^8.3.25",
    "@angular/compiler-cli": "~8.2.8",
    "@angular/language-service": "~8.2.8",
    "@types/d3": "^5.7.2",
    "@types/datatables.net": "^1.10.17",
    "@types/jasmine": "^3.5.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/jquery": "^3.3.33",
    "@types/node": "^13.9.0",
    "codelyzer": "^5.0.1",
    "compressing": "^1.4.0",
    "concurrently": "^5.1.0",
    "fs": "0.0.2",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage-istanbul-reporter": "*",
    "karma-jasmine": "^3.1.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "mkdirp": "0.5.1",
    "ngx-spec": "^2.0.0",
    "protractor": "^5.4.3",
    "rimraf": "^3.0.2",
    "ts-node": "^8.6.2",
    "tslint": "^5.11.0",
    "typescript": "~3.4.5"
  

之后：

  "name": "web-front",
  "version": "1.0.3",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:package": "node bin/build.js"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "~9.1.9",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/forms": "~9.1.9",
    "@angular/localize": "^9.1.9",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/router": "~9.1.9",
    "@dagrejs/graphlib": "^2.1.4",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
    "@ng-select/ng-select": "^4.0.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "4.0.0",
    "@swimlane/ngx-charts": "^14.0.0",
    "angular-datatables": "^9.0.2",
    "angular-oauth2-oidc": "^9.2.2",
    "angular2-uuid": "^1.1.1",
    "bootstrap": "^4.5.0",
    "chroma-js": "^2.0.6",
    "d3": "^5.16.0",
    "d3-simple-slider": "^1.7.0",
    "datatables.net": "^1.10.21",
    "datatables.net-dt": "^1.10.21",
    "humanize-duration": "^3.23.0",
    "install": "^0.13.0",
    "jointjs": "^3.0.4",
    "jsrsasign": "^8.0.15",
    "moment": "^2.26.0",
    "ng-sidebar": "^9.2.1",
    "ngx-slick-carousel": "^0.4.6",
    "ngx-spinner": "^9.0.2",
    "ngx-toastr": "^12.0.1",
    "primeicons": "^2.0.0",
    "primeng": "^9.1.0",
    "retina-dom-to-image": "^2.5.6",
    "rxjs": "~6.5.5",
    "slick-carousel": "^1.8.1",
    "svg-pan-zoom": "^3.6.1",
    "tslib": "^1.13.0",
    "underscore": "^1.10.2",
    "zone.js": "~0.10.2"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "^9.1.7",
    "@angular/compiler-cli": "~9.1.9",
    "@angular/language-service": "~9.1.9",
    "@types/d3": "^5.7.2",
    "@types/datatables.net": "^1.10.19",
    "@types/jasmine": "^3.5.10",
    "@types/jasminewd2": "^2.0.8",
    "@types/jquery": "^3.3.38",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.2.2",
    "compressing": "^1.5.1",
    "concurrently": "^5.2.0",
    "fs": "0.0.2",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage-istanbul-reporter": "*",
    "karma-jasmine": "^3.1.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "mkdirp": "0.5.1",
    "ngx-spec": "^2.0.0",
    "protractor": "^7.0.0",
    "rimraf": "^3.0.2",
    "ts-node": "^8.10.1",
    "tslint": "^6.1.2",
    "typescript": "^3.8.3"
  

当我浏览应用程序时，第一个和最后 2 个链接可以正常工作，但其他链接组则不行...

编辑： 第一次使用直接链接直接导航到 4 个页面中的任何一个都可以正常工作，但在附加导航时会冻结，但不能到侧边栏上的第一页或最后 2 页。

编辑2： -我有一个全局过滤器数据，但也可以在我的诊断页面上使用它而没有问题 -路由器跟踪没有显示任何异常，所有事件都存在直到 NagiationEnd -catch in main.ts：platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => console.error(err)) 存在，但没有从那里打印消息

【问题讨论】：

你可能有一个永无止境的递归？你们有“全球”数据服务吗？

@Marc 我有一个全局过滤器数据，但也可以在我的诊断页面上使用它而没有问题

您使用的是路由器吗？如果是，请启用路由器跟踪。 RouterModule.forRoot(routes, enableTracing: true ),

已启用，但我没有看到任何异常，所有事件都存在，直到 NagiationEnd（我编辑了我的帖子）

你在 main.ts 中有什么问题吗？ platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => console.error(err));

【参考方案1】：

我在 simplebar 和 ngx-translate 上遇到了同样的问题。在一个简单栏内，我有一个延迟加载的列表，其中包含翻译。

通过 4-5 次到达滚动区域的底部并触发延迟加载，标签变得无响应，我什至不得不重新启动浏览器。

问题是，我使用了翻译文件中不存在的翻译密钥（例如 parent.sub.translationKey）。