angular-cli: webpack-bundle-analyzer not working correctly with the latest cli 1.3.0-beta.1

- [ x] bug report

Versions.

@angular/cli: 1.3.0-beta.1
node: 7.8.0
os: win32 x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.3.0-beta.1
@angular/compiler-cli: 4.3.1
@angular/language-service: 4.3.1

webpack-bundle-analyzer: "2.8.3", 
webpack: "3.1.0", 
@ngtools/webpack: "1.6.0-beta.1"

Repro steps.

ng new stats-app
cd stats-app && yarn add webpack-bundle-analyzer

modify package.json by adding a script: "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"

npm run analyze

Not showing bundles details/content:

Desired functionality.

Should display bundles details/content

Mention any other details that might be useful.

All working with angular cli 1.0.0 that I was using before

@angular/cli: 1.0.0
node: 7.8.0
os: win32 x64
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.3.1

webpack-bundle-analyzer: "2.8.3", 
webpack: "2.2.1",
@ngtools/webpack: "1.3.0"

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 25 (13 by maintainers)

Most upvoted comments

My guess would be an incompatibility with scope hoisting.

If the contents of the bundles is the goal, you can turn on sourcemaps and use sourcemap explorer.

clydin on Jul 20, 2017

The sourcemaps bit is a bug with the --build-optimizer flag and being tracked in https://github.com/angular/angular-cli/issues/7093.

filipesilva on Jul 31, 2017

After some additional research, the CLI didn’t actually break the functionality. Webpack 3 changed the verbose preset to not include the top level module list.

clydin on Aug 4, 2017

Big thanks to @clydin for the investigative work here.

Breaking webpack-bundle-analyzer was indeed a consequence of https://github.com/angular/angular-cli/pull/6989 where we started using stats.toJson('verbose') instead of just stats.toJson() , subsequently fixed by https://github.com/angular/angular-cli/pull/7259.

filipesilva on Aug 4, 2017

@e-cloud The problem is in the stats.json structure. Normally it is something like this:

{
  // ...
  "chunks": [
    // chunks info WITHOUT modules
  ],
  "modules": [
    // list of ALL modules from ALL chunks
  ]
  // ...
}

But new ng-cli generates stats file with the following structure:

{
  // ...
  "chunks": [
    // chunks info WITH modules.
    // each chunk object has it's own "modules" property with all modules it contains
  ]
  // ...and no top-level "modules" field
}

So there is no top-level modules field, but all of them are spread across chunk objects.

th0r on Aug 3, 2017

@ShadowManu I think there’s something odd with the setup reported in https://github.com/th0r/webpack-bundle-analyzer/issues/106, since it does mention CLI 1.2.6 but also Webpack 3.4.1, but CLI 1.2.6 is limited to webpack 2.x.

@valscion heya, thanks for chiming in! If there something we can do on Angular CLI to help please let me know.

filipesilva on Jul 31, 2017

Just tested with rc.0 and still an issue.

kuncevic on Jul 23, 2017