Wrong file order in index.html when bundleName is used

[matthiaskomarek]

🐞 Bug report

Command (mark with an x)

- [x] build
- [x] serve

Is this a regression?

No

Description

When i use a bundleName like the following inside the angular.json for the styles array. The order of scripts generated in the index.html are in the wrong order.

angular.json

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/ng2/main.ts",
            "polyfills": "src/ng2/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/ng2/favicon.ico",
              "src/ng2/assets"
            ],
            "styles": [
              { "input": "src/ng2/main.scss", "bundleName": "main" }
            ],
            "scripts": [
              "build/main-ng1.js"
            ]
          },

Order of scripts in index.html after running ng build

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="scripts.js"></script>

The Problem is, that the main.js get inserted before the scripts.js and this will fail if you have some external dependency added via scripts.js

I have already digged into the implementation in @angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin.js and found out that the problem is the bundle name main which is added into the this._options.entrypoints array before the scripts entrypoint is added.

🔬 Minimal Reproduction

See example above

🌍 Your Environment

Angular CLI: 7.3.0
Node: 8.11.1
OS: darwin x64
Angular: 7.2.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, upgrade

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.1
@angular-devkit/build-angular     0.12.1
@angular-devkit/build-optimizer   0.12.1
@angular-devkit/build-webpack     0.12.1
@angular-devkit/core              7.2.1
@angular-devkit/schematics        7.3.0
@angular/cli                      7.3.0
@ngtools/webpack                  7.2.1
@schematics/angular               7.3.0
@schematics/update                0.13.0
rxjs                              6.3.3
typescript                        3.2.2
webpack                           4.23.1

[alan-agius4]

Hi, I was unable to replicate this.

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>

Can you try to update to the latest version of @angular-devkit/build-angular?

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

If the problem persists, please provide a reproduction good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[matthiaskomarek]

Hey @alan-agius4 thanks for the fast reply. I think the issue occurs only when you add a bundleName of main to the styles config.
I have setup a repo here: https://github.com/matthiaskomarek/issue-app

When you run ng build you will see that the scripts.js file is now loaded after the main.js.

I have done a quick-fix on my side (via patch-package) in the index-html-webpack-plugin.js by reordering the scripts array. But i am not sure if this fix will fit your desired solution.

[alan-agius4]

Hi, thanks for the repo.

The root cause is that the name chosen for the css bundle is conflicting with the default module for the main.js script.

[clydin]

The CLI should emit an error in the case a bundle name option conflicts with a built-in name.

[matthiaskomarek]

Or, as i mentioned. The cli could reorder the scripts array before it gets inserted into the index.html file.
I could come up with a PR, if this is a proper solution for you guys

[alan-agius4]

@matthiaskomarek, re-ordering alone won't solve all the issues as this might also effect bundle budgets and other webpack plugins that we use.