CODEWITHSUNDEEP
angulartypescript
Serk
Serk

Reputation: 452

Angular app freeze/infinite loading after v9 upgrade without error

I'm trying to update my angular app from 8 to 9. Unfortunaly, the app seems to hang/load indefinitely on some page without any error so I can't really debug it.
The current tab become unresponsive and I have to close it with the process manager.

This is my package.json before

{
  "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"
  }
}

And after:

{
  "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"
  }
}

When I browse the app, the first and last 2 link work fine, but not the other group of links... enter image description here

enter image description here

Edit : Directly navigating to any of the 4 page work fine the first time with the direct link but freeze on addiational navigation, but not to the first or last 2 page on sidebar.

Edit2:
-I have a global filter data but also use it on my diagnostic page without issue
-router tracing don't show any anomaly, all the event are present until NagiationEnd
-catch in main.ts: platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => console.error(err)) is present but no message printed from there

Upvotes: 1

Views: 2869

Answers (1)

Mario
Mario

Reputation: 41

I had the same issue with simplebar and ngx-translate. Inside a simplebar i had a lazy-loaded list with translations in it.

By reaching the bottom of the scroll-area 4-5 times and by that triggering the lazy-loading, the tab became unresponsive and i even had to restart the browser.

The problem was, i was using a translation-key (f.e. parent.sub.translationKey) that did not exist in the translation file.

Upvotes: 0

Related Questions