angular-cli: Angular 5 to 6: Internet Explorer, Loading chunk failed (caused by function rest parameters)

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Have not tested serve with IE.

Versions

Node v8.11.3 npm 6.3.0

Angular CLI: 6.1.3 Node: 8.11.3 OS: linux x64 Angular: 6.1.2 … animations, common, compiler, compiler-cli, core, forms … language-service, platform-browser, platform-browser-dynamic … router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.7.3
@angular-devkit/build-angular      0.7.3
@angular-devkit/build-optimizer    0.7.3
@angular-devkit/build-webpack      0.7.3
@angular-devkit/core               0.7.3
@angular-devkit/schematics         0.7.3
@angular/cdk                       6.4.3
@angular/cli                       6.1.3
@angular/flex-layout               6.0.0-beta.17
@angular/material                  6.4.3
@angular/material-moment-adapter   6.4.3
@ngtools/webpack                   6.1.3
@schematics/angular                0.7.3
@schematics/update                 0.7.3
rxjs                               6.2.2
typescript                         2.9.2
webpack                            4.9.2

TL;DR and Status

After upgrading to Angular 6, this project’s build started to include dependencies of plotly.js that use function rest parameters syntax, which is not supported by Internet Explorer 11.

This seems to be caused by a combination of certain plotly.js imports and redundancy in the project’s modules where two different modules import PlotlyComponent and other modules import both of those.

Arlo will try to reproduce this module setup in a new cli project Aug 20-24

Repro steps

Our application was working with Internet Explorer 11 previously. We upgraded from angular/cli 1.7.4 to 6.1.3 and went through the Angular 6 upgrade process.

polyfills

verified polyfills match a new 6.1.3 project. The meant adding this line: import 'core-js/es6/weak-map'; Commented animations, which we had previously enabled: // import 'web-animations-js';

build

ng build --prod --deploy-url "/dashboard-dist/x.y.z/" (x.y.z is our application version, this path is how we serve the dist)

angular.json error occurs with optimization true or false.

          "configurations": {
            "production": {
              "optimization": false,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": true,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }

The log given by the failure

The app loads in Edge, Chrome, Firefox, Safari.

Using Internet Explorer 11 The app loads partially. AppModule, CoreModule, AppComponent seem to load fine. These JavaScript files execute fine: runtime, polyfills, scripts, main

After that, a series of chunks with multiple module names are loaded. The 2nd file (accord to network file load order) has an error. https://MYHOST.com/dashboard-dist/2.6.1-45-g4b99f71/band-aid-band-aid-module-ngfactory~demo-demo-module-ngfactory~press-overflow-press-overflow-module-n~a0d51d90.038dae500f4276aa6c84.js

Error Mesages SCRIPT1010: Expected identifier Error: Loading chunk MYCHUNK failed. with optimization=false, this line is

// get all points within the passed range
function (range ( ...args ) {
    let options
    // ...
}

My guess is that Internet Explorer does not support the Array spread operator. Is this the case? Internet Explorer does not support function Rest Parameters

Here is tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": false,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "strictNullChecks": false,
    "strictPropertyInitialization": false,
    "downlevelIteration": true,
    "module": "es2015"
  }
}

I tried adding "downlevelIteration": true but it didn’t fix the issue.

Here are those chunks (with --named-chunks on). The error is with the second of these (the first is harmony export/imports and does not contain rest parameter syntax). These load in all browsers. What are these chunks?

https://MYHOST.com/dashboard-dist/2.6.1-45-g4b99f71/admin-admin-module-ngfactory~band-aid-band-aid-module-ngfactory~demo-demo-module-ngfactory~press-ove~a1bd9788.5d054c3f7a4445b2ba1e.js
https://MYHOST.com/dashboard-dist/2.6.1-45-g4b99f71/band-aid-band-aid-module-ngfactory~demo-demo-module-ngfactory~press-overflow-press-overflow-module-n~a0d51d90.038dae500f4276aa6c84.js
https://MYHOST.com/dashboard-dist/2.6.1-45-g4b99f71/band-aid-band-aid-module-ngfactory~demo-demo-module-ngfactory~press-overflow-press-overflow-module-n~c989da39.063eb968f9c8f1de7507.js
https://MYHOST.com/dashboard-dist/2.6.1-45-g4b99f71/band-aid-band-aid-module-ngfactory~demo-demo-module-ngfactory~pwp-datasets-datasets-module-ngfactory~c6612e97.d26d4e796e6b47228cb5.js
https://MYHOST.com/dashboard-dist/2.6.1-45-g4b99f71/admin-admin-module-ngfactory~band-aid-band-aid-module-ngfactory~press-overflow-press-overflow-module~dcc0462d.fb22234d681c2ffcf2a0.js
https://MYHOST.com/dashboard-dist/2.6.1-45-g4b99f71/band-aid-band-aid-module-ngfactory~press-overflow-press-overflow-module-ngfactory~pwp-pwp-module-ngf~6538aa28.fc01e498d5c8e5f0e226.js
https://MYHOST.com/dashboard-dist/2.6.1-45-g4b99f71/band-aid-band-aid-module-ngfactory~press-overflow-press-overflow-module-ngfactory~pwp-pwp-module-ngf~e08b67b9.74a917b3f8c6fb8f698e.js
https://MYHOST.com/dashboard-dist/2.6.1-45-g4b99f71/demo-demo-module-ngfactory~pwp-pwp-module-ngfactory.57ec61eee1fce6678b23.js
https://MYHOST.com/dashboard-dist/2.6.1-45-g4b99f71/common.ac5aa9e1fdff127766b5.js
https://MYHOST.com/dashboard-dist/2.6.1-45-g4b99f71/pwp-pwp-module-ngfactory.8c848858c8031a97b6c5.js

band-aid, press-overflow, demo, admin are all are lazy-loaded and I don’t expect them to be loading on the homepage. I’m wondering if there’s some kind of dependency problem causing them to be loaded early. However, since the app works in other browsers this seems like a separate issue.

Desired functionality

Internet Explorer 11 should work as it did in Angular5 with cli 1.7.4

Troubleshooting Tips

For anyone encountering a similar issue. The Internet Explorer error is due to unsupported JavaScript syntax. In my case, the build system was pulling in raw dependencies of plotly.js from my node_modules.

1. Determine what dependency is the issue
   In angular.json set "optimization": false,
2. rebuild and examine where the error occurs in Internet Explorer. Determine some text to search for that identifies the problematic code.
3. search for that same text in your node_modules to find the dependency, which was plotly.js in my case (node_modules/plotly.js/dist/plotly.js) and its dependency (node_modules/point-cluster/quad.js)
4. review your imports and modules related to that dependency, fix any redundancy in your modules and/or clean-up imports