unable to Angular 18 with webpack-bundle-analyzer

Question

I'm building my Angular 18 application for bundle analysis:

ng build -stats-json

The resulting stats.json has 38K lines. Then I attempt to analyze using:

webpack-bundle-analyzer <path-to-json-file>

which gives me an error:

Could't analyze webpack bundle:
TypeError: Cannot read properties of undefined (reading 'filter')

Answer 1

You're using the application builder which doesn't rely on webpack but on esbuild.

For esbuild, you should use this analyzer instead: https://esbuild.github.io/analyze/

Contrary to the webpack solution, there isn't a dedicated package for that yet, this is only accessible via the webpage. See the dedicated issue on that topic.

Answer 2

Some working alternatives for esbuild include esbuild-visualizer and banal:

    "analyze-ev": "ng build --configuration=production --stats-json && esbuild-visualizer --metadata dist/stats.json --open=true",
    "analyze-banal": "ng build --configuration=production --stats-json && banal --metafile dist/stats.json",