ng serve/test/e2e does not work with Internet Explorer 11

[dmostert]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Yes, the previous version in which this bug was not present was: 7.x

Description

A clear and concise description of the problem...

Internet Explorer 11 does not load site when using ng serve.

Only errors in the dev console.

🔬 Minimal Reproduction

ng new ienotworking
ng serve
or
ng serve --prod

🔥 Exception or Error

SCRIPT1002: Syntax error
polyfills.js (2891,5)
SCRIPT1002: Syntax error
vendor.js (156,1)
SCRIPT1002: Syntax error
main.js (87,24)

🌍 Your Environment

Angular CLI: 8.0.0-rc.4
Node: 10.15.3
OS: win32 x64
Angular: 8.0.0-rc.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0-rc.4
@angular-devkit/build-angular     0.800.0-rc.4
@angular-devkit/build-optimizer   0.800.0-rc.4
@angular-devkit/build-webpack     0.800.0-rc.4
@angular-devkit/core              8.0.0-rc.4
@angular-devkit/schematics        8.0.0-rc.4
@angular/pwa                      0.12.4
@ngtools/webpack                  8.0.0-rc.4
@schematics/angular               7.2.4
@schematics/update                0.800.0-rc.4
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

IE11 only.

[alan-agius4]

Hi, thanks for reporting this. However this is now by design in version 8.

By default in version 8 we enable differential loading for ng build. However for ng test and ng serve we only generate a single ES2015 build which cannot run in IE 11.

There are a couple of options that you can do if you want to have ES5 code during serve.

1. Disable differential loading completely, (Not recommended)
You can turn differential loading off by changing the target from es2015 to es5 in your tsconfig.json

2. Have multiple configurations for serve.

Create a new tsconfig tsconfig-es5.app.json next to tsconfig.app.json with the below contents

{
 "extends": "./tsconfig.app.json",
 "compilerOptions": {
     "target": "es5" 
  }
}

In your angular.json add two new configuration section under the build and serve target to provide a new tsconfig.

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
      ...
  },
  "configurations": {
    "production": {
        ...
    },
    "es5": {
      "tsConfig": "./tsconfig-es5.app.json"
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "app:build:es5"
    }
  }
},

You can then run the serve with this configuration using the below command.

ng serve --configuration es5

[zlepper]

While that is a "workaround" for now, home come the CLI can't do differential loading in serve mode also, so the application at least behaves the same for both prod and non-prod?

[jamesbarrett95]

Workaround not working for me when running ng serve --config es5. The CLI returns Unknown option: '--config' and Unknown option: 'es5'

I ran ng s -c=es5 which worked for me

[samtsai]

Workaround not working for me when running ng serve --config es5. The CLI returns Unknown option: '--config' and Unknown option: 'es5'

I ran ng s -c=es5 which worked for me

Try ng serve --configuration es5, I think the previous mentioned solution was not working cause config does not exist as an option or alias OOTB

[benouat]

Coming from #14656 here 😄, I have one last question:

Why differential loading has only been implemented for ng build ?
Why can't we have an angularCompiler option or an angular.json flag to simply activate it no matter what in serve/test/e2e. It could even have a default value to turn it off (ie the new default behaviour)

For now and for me the only viable option is to switch from ng serve to ng build --watchin combination with npx serve --single -l 4200. I will then just loose the live reload.

---

EDIT: crap even that is not working, as ng build --watch also switch back magically to the same behaviour as ng serve → one single build 😢

[tmakin]

From what I can see of the new differential build, the process is effectively done twice. i.e. once for es5 and once for es6. I imagine it would significantly slow down the dev server reload time if differential loading was enabled by default. My project is already pretty slow so I if this was added to the dev server
I would vote for it be opt-in. Personally, I think the ng serve -c es5 workaround is fine, but it would be great if it was documented on the main angular.io site.

[alexciesielski]

I'm getting the following error when trying the workaround above:

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(tsConfig).

and VSCode underlines tsConfig , saying that property is not allowed

[tmakin]

@ciesielskico You are mixing up the serve and build sections. Take a closer look at the example above.

[ChrisMeeusen]

The manual steps required to update the multiple files bothered me and I didn't want to repeat it 20+ times this year for all our new projects so I created a npm Dev dependency to automate the workaround config updates. You can find it here : https://github.com/ChrisMeeusen/ng-ie-serve. Cheers.

[destus90]

@ChrisMeeusen
thanks for that lib. Just one note: why do you use fs.readFileSync to read .json files and then parsing them instead of using require? From the node.js docs

LOAD_AS_FILE(X)
1. If X is a file, load X as JavaScript text.  STOP
2. If X.js is a file, load X.js as JavaScript text.  STOP
3. If X.json is a file, parse X.json to a JavaScript Object.  STOP
4. If X.node is a file, load X.node as binary addon.  STOP