Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dmostert opened this issue May 17, 2019 · 30 comments
Closed

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

dmostert opened this issue May 17, 2019 · 30 comments

Comments

@dmostert
Copy link

@dmostert dmostert commented May 17, 2019

馃悶 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

This comment has been minimized.

Copy link
Collaborator

@alan-agius4 alan-agius4 commented May 19, 2019

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

This comment has been minimized.

Copy link

@zlepper zlepper commented May 31, 2019

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

This comment has been minimized.

Copy link

@jamesbarrett95 jamesbarrett95 commented May 31, 2019

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

This comment has been minimized.

Copy link

@samtsai samtsai commented May 31, 2019

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

This comment has been minimized.

Copy link

@benouat benouat commented Jun 4, 2019

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

This comment has been minimized.

Copy link

@tmakin tmakin commented Jun 4, 2019

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

This comment has been minimized.

Copy link

@ciesielskico ciesielskico commented Jun 5, 2019

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

image

@tmakin

This comment has been minimized.

Copy link

@tmakin tmakin commented Jun 5, 2019

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

@ChrisMeeusen

This comment has been minimized.

Copy link

@ChrisMeeusen ChrisMeeusen commented Jun 6, 2019

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

This comment was marked as off-topic.

Copy link

@destus90 destus90 commented Jun 6, 2019

@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

This comment was marked as off-topic.

Copy link

@ChrisMeeusen ChrisMeeusen commented Jun 6, 2019

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

@alan-agius4 alan-agius4 changed the title ng serve does not work with Internet Explorer 11 ng serve/test/e2e does not work with Internet Explorer 11 Jun 6, 2019
@teraxas

This comment has been minimized.

Copy link

@teraxas teraxas commented Jun 6, 2019

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

This comment has been minimized.

Copy link

@alastair-todd alastair-todd commented Jun 15, 2019

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

This comment has been minimized.

Copy link

@nasreddineskandrani nasreddineskandrani commented Jun 16, 2019

@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

This comment has been minimized.

Copy link

@ricardosaracino ricardosaracino commented Jun 17, 2019

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

This comment has been minimized.

Copy link

@sandipsrane sandipsrane commented Jun 18, 2019

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

This comment has been minimized.

Copy link

@ricardosaracino ricardosaracino commented Jun 18, 2019

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

@sandipsrane

This comment has been minimized.

Copy link

@sandipsrane sandipsrane commented Jun 18, 2019

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

@ChrisMeeusen

This comment has been minimized.

Copy link

@ChrisMeeusen ChrisMeeusen commented Jun 18, 2019

@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

This comment has been minimized.

Copy link

@sandipsrane sandipsrane commented Jun 18, 2019

@ChrisMeeusen it is giving me below error

image

@ChrisMeeusen

This comment has been minimized.

Copy link

@ChrisMeeusen ChrisMeeusen commented Jun 18, 2019

@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

This comment has been minimized.

Copy link

@ChrisMeeusen ChrisMeeusen commented Jun 19, 2019

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

@sandipsrane

This comment has been minimized.

Copy link

@sandipsrane sandipsrane commented Jun 19, 2019

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

This comment has been minimized.

Copy link

@alexfung888 alexfung888 commented Jun 21, 2019

    "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

This comment has been minimized.

Copy link

@chintandalwadiwk chintandalwadiwk commented Jun 27, 2019

It is not working
image

@alexfung888

This comment has been minimized.

Copy link

@alexfung888 alexfung888 commented Jun 28, 2019

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

This comment has been minimized.

Copy link

@eric-gagnon eric-gagnon commented Jul 4, 2019

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?

image

@eric-gagnon

This comment has been minimized.

Copy link

@eric-gagnon eric-gagnon commented Jul 11, 2019

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

This comment has been minimized.

Copy link

@vysheradugi4 vysheradugi4 commented Jul 22, 2019

It is not working
image

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 zloirock/core-js#412 (comment)

@angular-automatic-lock-bot

This comment has been minimized.

Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 9, 2019

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can鈥檛 perform that action at this time.