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

๐Ÿž 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.

29 Answers

โœ”๏ธAccepted Answer

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

Other Answers:

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.

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?

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

@alan-agius4 can we think about the possibility of adding an option in the cli menus? to ask if we want IE support for ng serve and auto generate tsconfig.es5.json and the needed updates in package.json/angular.json if the dev answers Yes.

For me it makes it boring and it's waste! to do this manually each time i create a project
: ) and also you forced [by design] the creation of this -> https://github.com/ChrisMeeusen/ng-ie-serve

Hope you do something (lean) about it, Angular Team.

More Issues: