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

[beeman]

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)

[flamingbug]

Same in full release.

[pumano]

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

[visurel]

Not working, tried various combinations of --build-optimizer=false and named chunks, vendor bundles, nothing works, the result is always the same as above.

[tmakin]

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

[beeman]

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]

Looks like https://webpack.github.io/analyse is broken because of this issue...

[alan-agius4]

Will be fixed by: webpack/analyse#37

[JohannesHoppe]

The PR is still open, but I successfully tested this against angular 6.0.4. / @angular/cli 6.0.8

npm install --save-dev webpack-bundle-analyzer
ng build --stats-json
npx webpack-bundle-analyzer dist/APP_NAME/stats.json

The issue might be obsolete?

[muradm]

Same problem here with 7.0.2, fresh new project.

[LosD]

@JohannesHoppe Are you using lazy-loaded modules? I don't think it's an issue otherwise, looking at the fix from @alan-agius4

[shinigamiCZ]

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

1. add breakpoint before file parsing fails (use the devtools to navigate to error source)
2. save t or whatever that should contain .modules to global variables via devtools
3. 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

[romulocintra]

Just works perfect with :

Angular CLI: 7.0.4
Node: 10.1.0
OS: darwin x64
Angular: 7.0.2

[intellix]

@alan-agius4 PR was submitted in July and has yet to be looked at let alone merged. The last commit to Webpack Analyser was 2 years ago. I'm thinking it's time to remove the reference to the abandonware in the help text:

  --stats-json
    Generates a 'stats.json' file which can be analyzed using tools such as: #webpack-bundle-analyzer' or https: //webpack.github.io/analyse

Just tried webpack-bundle-analyzer on the exported stats.json file and am not sure what extra information it's giving compared to source-map-explorer. Is it worth the maintenance when you can just enable source-maps and use source-map-explorer?

ng build --source-map
source-map-explorer dist/app/main.xyz.js

[juarezpaf]

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.

[alan-agius4]

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

As @intellix correctly mentioned in his comment above #10589 (comment) 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 webpack/analyse#37. Also, this same issue is being tracked in their issue tracker here: webpack/analyse#30.