Problem
In my main.js bundle there is a single massive node_module dependency that does not make sense. ngx-translate-core • 2.85MB in node_modules
Expected behaviour
The ngx-translate-core.mjs package should only be 17.5Kb according to bundlephobia: @ngx-translate/core@14.0.0.
Attempted solutions
I have tried upgrading Angular from version 12 to 13 and now to 14. When it was Angular 12 it appeared as unsupportedIterableToArray • 2.85 MB
Changing the tsconfig.module to CommonJS also caused the chunk to map to a different npm package ngrx-store-localstorage • 2.9 MB
Is there a way to see the dependency tree that webpack uses internally in order to see what causes this to be bundled?
package.json:
"dependencies": {
"@angular/animations": "^14.2.0",
"@angular/cdk": "^14.2.0",
"@angular/common": "^14.2.0",
"@angular/compiler": "^14.2.0",
"@angular/core": "^14.2.0",
"@angular/forms": "^14.2.0",
"@angular/localize": "^14.2.0",
"@angular/material": "14.2.0",
"@angular/material-moment-adapter": "14.2.0",
"@angular/platform-browser": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/router": "^14.2.0",
"@ng-bootstrap/ng-bootstrap": "^13.0.0",
"@ng-idle/core": "^11.1.0",
"@ng-idle/keepalive": "^11.0.3",
"@ngrx/effects": "^14.2.0",
"@ngrx/router-store": "^14.2.0",
"@ngrx/store": "^14.2.0",
"@ngrx/store-devtools": "^14.2.0",
"@ngx-translate/core": "14.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@types/lodash": "^4.14.168",
"aws-amplify": "^4.3.5",
"aws-sdk": "^2.1143.0",
"core-js": "^2.6.12",
"date-fns": "^2.28.0",
"date-fns-tz": "^1.3.4",
"eslint-plugin-unused-imports": "^2.0.0",
"html2canvas": "^1.0.0-rc.7",
"jspdf": "^2.3.1",
"jszip": "^3.5.0",
"jszip-utils": "^0.1.0",
"lodash": "^4.17.21",
"moment": "^2.29.2",
"ngrx-store-localstorage": "14.0.0",
"ngx-logger": "^4.0.6",
"ngx-photo-editor": "^0.3.6",
"pdf417-generator": "^1.0.3",
"rxjs": "7.5.6",
"stream-browserify": "^3.0.0",
"utf8": "^3.0.0",
"util": "^0.12.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"tslib": "^2.0.0",
"@angular-devkit/build-angular": "^14.2.1",
"@angular-eslint/builder": "14.0.3",
"@angular-eslint/eslint-plugin": "14.0.3",
"@angular-eslint/eslint-plugin-template": "14.0.3",
"@angular-eslint/schematics": "14.0.3",
"@angular-eslint/template-parser": "14.0.3",
"@angular/cli": "14.2.0",
"@angular/compiler-cli": "^14.2.0",
"@angular/language-service": "^14.2.0",
"@types/file-saver": "^2.0.3",
"@types/graphql": "^14.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/jest": "^26.0.20",
"@types/jszip": "^3.4.1",
"@types/node": "^12.19.14",
"@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2",
"canvas": "^2.7.0",
"commander": "^6.2.1",
"crypto-browserify": "^3.12.0",
"csvtojson": "^2.0.10",
"cypress-file-upload": "^5.0.8",
"dependency-cruiser": "^10.0.1",
"eslint": "^8.23.0",
"fast-csv": "^4.3.6",
"graphql": "^15.3.0",
"jasmine-spec-reporter": "~5.0.0",
"jest": "^27.3.1",
"jest-junit": "^13.0.0",
"jest-preset-angular": "^10.1.0",
"ng-packagr": "^14.2.0",
"ngx-translate-testing": "6.1.0",
"protractor": "~7.0.0",
"stream-browserify": "^3.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.6.4"
},