Angular-cli: 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.

[ciesielskico]

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

[ChrisMeeusen]

@destus90
Hey thanks for the feedback. Honestly I didn't use require because I didn't know that it had those capabilities.

However, after trying to use require I get the following runtime error:

Error: Cannot find module 'package.json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
    at Function.Module._load (internal/modules/cjs/loader.js:513:25)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (C:\github\ng-ie-serve\src\package-json-utils.js:2:19)
    at Module._compile (internal/modules/cjs/loader.js:707:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
    at Module.load (internal/modules/cjs/loader.js:605:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
    at Function.Module._load (internal/modules/cjs/loader.js:536:3)

I pushed my attempt at using require to a branch called require-json-read if your interested at seeing / fixing what I'm doing wrong.

Thanks!

[teraxas]

Also situation with 'ng test' on IE11/PhantomJS is totally diferent it seems, as even after setting target to 'es5' in tsconfig it doesn't work correctly, due to missing polyfils, as said in my issue: #14691

[alastair-todd]

Is it possible to document this better please? seems a good angular.io place which is woefully misleading.
For a start polyfills for es6 are now part of the angular build but I had to find that out by reading many articles from google.

If I remember the generation of the es5 polyfill file was automatic in beta - now we have some extra recommended steps which are undocumented.

[nasreddineskandrani]

@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.

[ricardosaracino]

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.

Why not just add the start:es5 to the angular.json and package.json file and then a user could choose run it or not

[sandipsrane]

workaround is not working for me. I am getting below error

SCRIPT1046: Multiple definitions of a property not allowed in strict mode
File: vendor.js, Line: 4066, Column: 25

[ricardosaracino]

@sandipsrane, did you enable ie mode in the browserlist file IE 9-11?

[sandipsrane]

@ricardosaracino I did after your response but same result..

[ChrisMeeusen]

@sandipsrane, have you tried just using this :

https://github.com/ChrisMeeusen/ng-ie-serve

It should just make all the changes for you. Install it, run it, and move on.

[sandipsrane]

@ChrisMeeusen it is giving me below error

[ChrisMeeusen]

@sandipsrane Sorry there was an issue with the package and bin command setup. Please install version 1.0.1 and kick the tires.

Thanks for letting me know about the issue.

[ChrisMeeusen]

@sandipsrane created an issue here as to not pollute this thread. I'm working on a fix for this.
https://github.com/ChrisMeeusen/ng-ie-serve/issues/2

[sandipsrane]

Options mentioned above are working now. It was not working because Ivy was enabled in tsconfig.app.json. After making it false it started working.

"angularCompilerOptions": {
"enableIvy": true
}

[alexfung888]

    "es5": {
      "tsConfig": "./tsconfig-es5.app.json"
    }

shouldn't it read src/tsconfig-es5.app.json instead?
tsconfig.app.json lives under src/ and therefore I created tsconfig-es5.app.json there, next to it.

and I think it is worth pointing out that in

{
  "browserTarget": "app:build:es5"
}

"app" should be replaced by the actual app name (actual key value used under "project" key)

[chintandalwadiwk]

It is not working

[alexfung888]

It is not working

@chintandalwadiwk
If IE11 throws object doesn't support..., it is often because IE is running in compatibility mode (eg 5). What is the number shown on the top right (just above the word "Target" (at the top right corner of your screen capture)?

[eric-gagnon]

Hello,

We had the issue too while migrating as we have to support IE10-IE11. I have followed the instructions here and read other related threads and that helped fixing the script issues and supporting IE for local dev testing (ng serve) but there is still a issues in rendering. Could be related to flex / break-points calculations . We use Material with Bootstrap grid for layout (only grid, not full Bootstrap) and nothing really special aside of that.

Is there a way to find what polyfill where removed that could affect css and such?

I will try to compare the runtime of our older 7.x build where everything worked just fine (without anything extra in the polyfill file) but I would gladly take any hint.

Using localhost, I see that style.js have no es5 variant (like we can see in this work in progress document update : https://pr31262-14beff1.ngbuilds.io/guide/deployment), could be a hint?

[eric-gagnon]

If this can be usefull to someone else, my coworker was able to figure it out.
It was something missing interacting with bootstrap that he fixed with something like this:

@import './variables';
.row {
    width: calc( 100% + (#{$gutter} * 2));
}

Some more testing required but it seem to be fine now.

[vysheradugi4]

It is not working

Did you resolve this issue? Same have. IE-11, and I checked what not compatibility mode. I got "Object doesn't support property or method 'values'" error in infinity cycle. It looks like file with polyfills is not completed, without Object.values and other features. How I can complete polifills file in Angular 8?

resolved: I added in polyfills.ts import 'core-js/es7/array'; and set up paths like in this comment https://github.com/zloirock/core-js/issues/412#issuecomment-495249250

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}