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

[kuncevic]

- [ 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"

[deebloo]

I can confirm the issue. Haven't been able to track down the problem though

[clydin]

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.

[kuncevic]

Just tested with rc.0 and still an issue.

[filipesilva]

I understand this happens, but I don't think this is an issue in Angular CLI. We just pass on the stats json option into webpack, and then webpack-bundle-analyzer is used to analyse it. The CLI doesn't do anything at all with that file.

Have you tried opening an issue in https://github.com/th0r/webpack-bundle-analyzer or https://github.com/webpack/webpack instead? If it's a matter of updating our version of either I'm happy to do so.

[ShadowManu]

There is an opened issue reporting for CLI 1.2.6, so probably not related to changes on 1.3.

[valscion]

My guess would be an incompatibility with scope hoisting.

Yes, this is very likely to be the issue with webpack-bundle-analyzer. As it happens, webpack-bundle-analyzer is not yet compatible with webpack's scope hoisting.

We're figuring out a solution for this, but for now, drilling deeper into the bundle isn't possible.

You could try to view the "stat" size, as it doesn't rely on parsing the generated bundle (where, due to scope hoisting, we've lost the details of module boundaries)

[filipesilva]

@ShadowManu I think there's something odd with the setup reported in webpack-contrib/webpack-bundle-analyzer#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.

[chriszrc]

Even using sourcemaps, using the latest cli (1.3.0.rc3), all information about the vendor libs is gone

[filipesilva]

The sourcemaps bit is a bug with the --build-optimizer flag and being tracked in #7093.