Why is Angular 7 App having more string objects in heap in comparison to AngularJs? - angularjs

Question

{
"name": "ClientApp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~7.1.0",
"#angular/common": "~7.1.0",
"#angular/compiler": "~7.1.0",
"#angular/core": "~7.1.0",
"#angular/forms": "~7.1.0",
"#angular/http": "~7.1.0",
"#angular/platform-browser": "~7.1.0",
"#angular/platform-browser-dynamic": "~7.1.0",
"#angular/router": "~7.1.0",
"#ng-bootstrap/ng-bootstrap": "^4.0.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"jquery": "2.2.3",
"popper.js": "^1.14.5",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26",
"angular": "1.5.5",
"angular-animate": "1.5.5",
"angular-aria": "1.5.7",
"angular-cookies": "1.5.5",
"angular-mocks": "1.5.5",
"angular-sanitize": "1.5.5",
"angular-scroll": "1.0.2",
"angular-ui-bootstrap": "1.3.3",
"angular-ui-grid": "4.0.4",
"angular-ui-router": "1.0.3",
"animate": "1.0.0",
"animate.css": "3.5.2",
"jquery-ui": "1.12.1",
"jquery.inputmask": "3.3.4",
"lodash": "4.17.11",
"ionicons": "2.0.1",
"moment": "2.13.0",
"ng-mask": "3.1.1",
"spin.js": "2.3.2",
"stacktrace-js": "2.0.0",
"toastr": "2.1.2",
"waypoints": "4.0.1",
"#angular/upgrade": "7.1.1",
"angular2-template-loader": "0.6.2",
"#ngrx/effects": "^6.0.1",
"#ngrx/store": "^6.0.1",
"#ngrx/store-devtools": "^6.0.1",
"ngx-page-scroll": "5.0.1",
"ngx-toastr": "9.1.1",
"#aspnet/signalr": "1.1.0"
},
"devDependencies": {
"#angular-devkit/build-angular": "0.11.0",
"#angular/cli": "~7.1.0",
"#angular/compiler-cli": "~7.1.0",
"#angular/language-service": "~7.1.0",
"#types/angular": "1.6.51",
"#types/core-js": "2.5.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "10.12.11",
"codelyzer": "~4.5.0",
"css-loader": "0.8.0",
"file-loader": "2.0.0",
"imports-loader": "0.8.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"style-loader": "0.8.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6",
"url-loader": "1.1.2",
"webpack-cli": "^3.1.2"
}
}
I had an app which was in Angular JS 1.5, Now we decided to migrate it. As part of the initial analysis, I was doing a simple POC with just 10-15 components which don't have any complex business logic. I did copy a couple of styles from the previous app and that's about it. With just these 15 components when I build the new app with
ng build --prod --vendor-chunk --sourceMap=false --
I realized Angular 7 app has a very high heap size in comparison to our existing Angular JS based application. The major difference comes out from string objects which is very large in Angular 7, I just want to understand is this normal for Angular 7 or am I missing here anything.
Also with --aot option, the heap size is even more. We do have a couple of requirements like open in a new window (which again loads all app in new chrome tab with a different route). I am afraid if the user will open 3 or more tabs memory will reach around a Gb.
Is there any way we can minimize the run time heap memory especially these strings? I am attaching images from Chrome Dev Tools and my angular.json file here.
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ClientApp": {
"root": "ClientApp",
"sourceRoot": "ClientApp",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot/clientapp/dist",
"index": "ClientApp/index.html",
"main": "ClientApp/main.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.app.json",
"assets": [
"ClientApp/favicon.ico",
"ClientApp/assets",
{
"glob": "**/*",
"input": "Content",
"ignore": [ "*.js", "*.css" ],
"output": "Content/"
},
],
"styles": [
"ClientApp/styles.css",
"Content/themes/base/jquery-ui.min.css",
"Content/dmsglobalstyles.css",
"Content/styles-extension.css",
"Content/responsive-styles.css"
],
"scripts": [
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "ClientApp/environments/environment.ts",
"with": "ClientApp/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": false,
"namedChunks": true,
"aot": false,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ClientApp:build"
},
"configurations": {
"production": {
"browserTarget": "ClientApp:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ClientApp:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "ClientApp/test.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.spec.json",
"karmaConfig": "ClientApp/karma.conf.js",
"styles": [
"ClientApp/styles.css"
],
"scripts": [],
"assets": [
"ClientApp/favicon.ico",
"ClientApp/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"ClientApp/tsconfig.app.json",
"ClientApp/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ClientApp-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ClientApp:serve"
},
"configurations": {
"production": {
"devServerTarget": "ClientApp:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ClientApp"
}
Dev Build Bundle