Webpack-bundle-analyzer: Angular CLI with scripts forces displaying of only stat size

[zbuhler]

Issue description

When using the webpack-bundle-analyzer in conjunction with the Angular CLI there is an issue with parsing the scripts.[hash].bundle.js.

When specifying scripts to put in the script bundle via the .angular-cli.json those scripts get concatenated and not wrapped in any webpack functionality like "webpackJsonp(". This appears to result in a parsing error with the webpack-bundle-analyzer which in turn causes all chunks to go off the stats.json making it so you can't see parsed or gzipped sizes when using the tool.

To reproduce this issue please use this repo

For extra information surrounding this issue (and some ideas on ways to tackle it) you can view the last couple of comments from this isssue/thread.

To "fix" it locally you can do the following:

The relevant parts of the stats.json to remove are-

  "assetsByChunkName": {
    "inline": "inline.86cf029305c934704a61.bundle.js",
    "main": "main.66983cb30db00a1c5598.bundle.js",
    "polyfills": "polyfills.dc963f90580f1044b785.bundle.js",
    "styles": "styles.9c0ad738f18adc3d19ed.bundle.css",
-   "scripts": "scripts.d464be456471b1b5f048.bundle.js"
  }

and

-{
-  "name": "scripts.d464be456471b1b5f048.bundle.js",
-  "size": 158555,
-  "chunks": [
-    "scripts"
-  ],
-  "chunkNames": [
-    "scripts"
-  ],
-  "emitted": true
-},

Which effectively excludes that chunk from being analyzed.

Technical info

• Webpack Bundle Analyzer version: 2.11.1
• Webpack version: 3.10.0
• Node.js version: 9.1.0
• npm/yarn version: Yarn 1.3.2
• OS: Mac

Debug info

How do you use this module? As CLI utility or as plugin? CLI

If CLI, what command was used? (e.g. webpack-bundle-analyzer -O path/to/stats.json)

webpack-bundle-analyzer dist/stats.json

If plugin, what options were provided? (e.g. new BundleAnalyzerPlugin({ analyzerMode: 'disabled', generateStatsFile: true }))

N/A

What other Webpack plugins were used?

Default Angular CLI.

Stats.json

The stats.json can be generated by using the example reproduction repo.

[valscion]

Hi! Thank you so much for creating a new issue, this makes tracking this case much easier :relaxed:.

I tagged this as a "feature" for now, as webpack-bundle-analyzer as it currently stands isn't broken per-se — it just won't work with Angular CLI the way we'd like it to.

We'll get to this issue when we have time. On a quick glance, it seems that we've got enough information to be able to figure out a good strategy on fixing this case ☺️

[Koslun]

Can verify that although version 6 of Angular CLI brings in a lot of changes, this remains an issue even with version 6. So a fresh @angular/cli project (like this one) still has no issues but upon adding a script in the scripts array of the angular.json config, you only see the Stat version. In our case we could get around it by simply loading the script through an npm package.

Technical info

• Webpack Bundle Analyzer version: 2.12.0
• @angular/cli version: 6.0.1
• Webpack version: 4.6.0 (through @angular/cli dependencies)
• Node.js version: 8.9.1
• npm/yarn version: Yarn 1.6.0
• OS: Windows

[byrondover]

@Koslun Would you mind sharing a specific example of the "loading the script through an npm package" workaround?

[Koslun]

@byrondover Think I said that incorrectly actually. I rather instead loaded it as a script tag in index.html outside of the Angular app:

 <script>
    (function(i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r;
      i[r] = i[r] || function() {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date();
      a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
      a.async = 1;
      a.src = g;
      m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-XXXXXXXX-1', 'auto'); // auto -> none in local mode
  </script>

I then additionally used a separate npm package to fire off an event in Google analytics: https://github.com/angulartics/angulartics2#minimal-setup-for-google-analytics. But I didn't specifically actually need to an npm package in this case.

My experience is however that most JavaScript libraries are also available on npm in which case you should be able to just import or require them into your Angular bootstrapping file or polyfills file, i.e. main.ts and polyfills.ts

[th0r]

Should be fixed in v2.13.0