CODEWITHSUNDEEP
angularmemory-leaksangular7heap-memory
Drakenfly
Drakenfly

Reputation: 51

Angular 7 - Memory footprint / leaks?

After upgrading a quite large application (about 300-400 components and a lot of providers, @ngxs and @ngrx) from angular+angular/material from v6 to v7 without chaning the rest of the code I noticed a lot of memory overhead.

Comparing two memory dumps from app before and after upgrade it looks like this:

Memory dump of @angular v7 app

Memory dump of @angular v6 app

These heap snapshots were taken after logging in both pages, navigating to a page with a lot of stuff going on and doing a refresh in both instances. After the initial load finished, I took the snapshots.

Comparing the two heap sizes, the difference between v6 and v7 is always the difference of (string) constants in memory.

Did anyone notice the same behavior already? Does anyone have an idea how I can isolate the problem?

My package.json looks like this:

{
  "name": "cwa",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "./node_modules/.bin/nx lint && ng lint",
    "e2e": "ng e2e",
    "affected:apps": "./node_modules/.bin/nx affected:apps",
    "affected:build": "./node_modules/.bin/nx affected:build",
    "affected:e2e": "./node_modules/.bin/nx affected:e2e",
    "affected:test": "./node_modules/.bin/nx affected:test",
    "affected:lint": "./node_modules/.bin/nx affected:lint",
    "affected:dep-graph": "./node_modules/.bin/nx affected:dep-graph",
    "format": "./node_modules/.bin/nx format:write",
    "format:write": "./node_modules/.bin/nx format:write",
    "format:check": "./node_modules/.bin/nx format:check",
    "update": "ng update @nrwl/schematics",
    "update:check": "ng update",
    "workspace-schematic": "./node_modules/.bin/nx workspace-schematic",
    "dep-graph": "./node_modules/.bin/nx dep-graph",
    "help": "./node_modules/.bin/nx help",
    "affected": "./node_modules/.bin/nx affected"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.3",
    "@angular/cdk": "7.1.1",
    "@angular/common": "7.1.3",
    "@angular/compiler": "7.1.3",
    "@angular/core": "7.1.3",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "7.1.3",
    "@angular/material": "7.1.1",
    "@angular/material-moment-adapter": "7.1.1",
    "@angular/platform-browser": "7.1.3",
    "@angular/platform-browser-dynamic": "7.1.3",
    "@angular/router": "7.1.3",
    "@ctrl/tinycolor": "^2.2.1",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@ngrx/effects": "7.0.0-beta.1",
    "@ngrx/store": "7.0.0-beta.1",
    "@ngrx/router-store": "7.0.0-beta.1",
    "@ngrx/store-devtools": "7.0.0-beta.1",
    "@ngx-translate/core": "^10.0.2",
    "@ngxs/devtools-plugin": "^3.3.2",
    "@ngxs/router-plugin": "^3.3.2",
    "@ngxs/storage-plugin": "^3.3.2",
    "@ngxs/store": "^3.3.2",
    "@nrwl/nx": "7.1.1",
    "angular-highcharts": "7.0.2",
    "core-js": "^2.5.4",
    "d3": "^3.5.17",
    "file-saver": "^1.3.8",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "highcharts": "^6.2.0",
    "immer": "^1.5.0",
    "moment": "^2.22.2",
    "ng2-charts": "^1.6.0",
    "ngrx-store-freeze": "0.2.4",
    "ngx-cookie-service": "^1.0.10",
    "outdated-browser-rework": "^2.6.1",
    "perfect-scrollbar": "^1.4.0",
    "rxjs": "6.3.3",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular-devkit/build-ng-packagr": "~0.11.0",
    "@angular/cli": "7.1.2",
    "@angular/compiler-cli": "7.1.3",
    "@angular/language-service": "7.1.3",
    "@nrwl/schematics": "7.1.1",
    "@types/d3": "3.5.34",
    "@types/highcharts": "^5.0.34",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-marbles": "0.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-firefox-launcher": "^1.1.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng-packagr": "^4.2.0",
    "prettier": "1.15.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tsickle": ">=0.34.0",
    "tslib": "^1.9.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

Upvotes: 4

Views: 4221

Answers (1)

Qutory
Qutory

Reputation: 109

I have the same problem. I manage to isolate it to rxjs version 6.3.3. I downgraded it to 6.3.2 and seems to be working fine. I think it might be related to this issue reported on their github repostiory.

Upvotes: 2

Related Questions