angular-cli: Stats file generated by ng build --stats-json cannot be parsed by analyzers

Versions

Angular CLI: 6.0.0-rc.9
Node: 9.5.0
OS: darwin x64
Angular: 6.0.0-rc.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.12
@angular-devkit/build-angular     0.5.12
@angular-devkit/build-optimizer   0.5.12
@angular-devkit/core              0.5.12
@angular-devkit/schematics        0.5.12
@angular/cli                      6.0.0-rc.9
@ngtools/webpack                  6.0.0-rc.10
@schematics/angular               0.5.12
@schematics/update                0.5.12
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

ng new test-app
cd test-app
ng build --stats-json
npx webpack-bundle-analyzer ./dist/test-app/stats.json

Observed behavior

Desired behavior

File should be parsed by the analyzer.

Mention any other details that might be useful (optional)

Another place where it’s broken:

Upload the file dist/test-app/stats.json to https://webpack.github.io/analyse/
The file does not get parsed by https://webpack.github.io/analyse/
An error appears in the console:

Uncaught TypeError: Cannot read property 'sort' of undefined
    at r (web.js:1)
    at Object.e.load (web.js:1)
    at FileReader.e.onload (8.568a26e05565c8025a86.js:1)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 31
Comments: 17 (5 by maintainers)

Commits related to this issue

docs: remove analyse link from statsJson description https://webpack.github.io/analyse has been broken for over a year and it seems that it is no longer maintained. See https://github.com/webpack/a... — committed to angular/angular-cli by deleted user 5 years ago
docs: remove analyse link from statsJson description https://webpack.github.io/analyse has been broken for over a year and it seems that it is no longer maintained. See https://github.com/webpack/a... — committed to angular/angular-cli by deleted user 5 years ago

Most upvoted comments

I confirm. Same problem. Webpack bundle analyzer not working in Angular 6

pumano on May 6, 2018

Thanks @tmakin - confirmed it works:

npx webpack-bundle-analyzer@latest ./dist/test-app/stats.json

Or just install the latest version globally:

npm i -g webpack-bundle-analyzer@latest

Probably good to keep the issue open until webpack.github.io/analyse works too.

beeman on May 12, 2018

Will be fixed by: https://github.com/webpack/analyse/pull/37

alan-agius4 on Jul 30, 2018

This is now working fine with Webpack Bundle Analyzer 2.11.2 https://www.npmjs.com/package/webpack-bundle-analyzer

tmakin on May 12, 2018

I am not able to go deeper using Angular 6.1.8, CLI 6.2.3 and webpack-bundle-analyzer: 3.0.3.

@filipesilva do you have any recommendation here? http://webpack.github.io/analyse/ is also not parsing correctly the stats.json file generated by the CLI.

juarezpaf on Nov 28, 2018

Same in full release.

flamingbug on May 4, 2018

@juarezpaf, webpack-bundle-analyzer` seems to be working.

alan-agius4 on Feb 12, 2019

Hi, I’m sorry, but this issue is not caused by Angular CLI.

As @intellix correctly mentioned in his comment above https://github.com/angular/angular-cli/issues/10589#issuecomment-440979327 there are other alternatives that work such as source-map-explorer.

Unfortunately https://github.com/webpack/analyse seems to be unmaintained, sometime ago I did create a PR to fix this, however it was never looked at https://github.com/webpack/analyse/pull/37. Also, this same issue is being tracked in their issue tracker here: https://github.com/webpack/analyse/issues/30.

alan-agius4 on Feb 12, 2019

Some hardcore workaround: If you intent to use https://webpack.github.io/analyse:

add breakpoint before file parsing fails (use the devtools to navigate to error source)
save t or whatever that should contain .modules to global variables via devtools
paste

temp1.modules = [];
for(const chunk of temp1.chunks) {
    temp1.modules.push(... chunk.modules);
}

to console, where temp1 is name of generated global variable 4) ??? 5) profit

You can even see reasons why something was included - which was the main reason i attempted to use that tool

shinigamiCZ on Nov 5, 2018