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/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.

[valscion]

@filipesilva one possibility would be to configure the builds to not use scope hoisting when you want to analyze the bundle contents with webpack-bundle-analyzer. This way the plugin would be able to show you the sizes of each modules separately.

I'm not sure if we're able to even figure out the missing information after the scope hoisting, but I haven't yet looked into it that much.

[th0r]

Hmm, resulting stats file has very strange structure.
@filipesilva Could you provide some insides about what have been changed in webpack configuration in ng-cli 1.3.0-rc.3?

[e-cloud]

The fact is from @angular/cli@1.2.6 to @angular/cli@1.3.0-rc.3, the webpack version is upgraded from ~2.4.0 to ~3.4.0. There are breaking changes inside webpack which affect @angualr/cli.

As @valscion said, a temporary solution is to provide a flag in @angular/cli to turn off webpack.optimize.ModuleConcatenationPlugin() at here