Angular ng serve does not include polyfills -- IE11/Edge only working when running ng build --prod

Question

I've tried using both npm run start and ng serve for this. In all cases, the app produced does NOT work at all in IE11 and Edge.

There are many other problems surrounding IE11 and Edge but this is strictly about the problem with Angular CLI not being able to effectively include the polyfills when running ng serve.

    ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-01T15:27:24.006Z
Hash: f7ee38fccff1d585e3ed
Time: 12681ms
chunk {main} main.js, main.js.map (main) 119 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 452 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 86.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 7.2 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.

This is absolutely necessary as I need to make my app completely IE11/Edge compatible and I Can't build for production to check if centering a div has worked.

EDIT1:

Running ng serve --prod seems to actually work BUT goodness is it slow when modifying something. Would still like to find a way around this.

Do you have all the IE11 polyfills enabled? (See angular.io/guide/browser-support#polyfill-libs). Also, is your tsconfig.json target set to "es5" ? — Jolleyboy
– Jolleyboy, Commented Oct 1, 2018 at 15:46
@Jolleyboy as mentioned in the post -- YES and they all work when using ng build --prod and ng serve --prod -- it's only when running ng serve that it doesn't work which is still critical. — SebastianG
– SebastianG, Commented Oct 1, 2018 at 15:48

Chris · Accepted Answer · 2019-04-08 18:10:30Z

3

This may be a little late for you, but in case anyone else finds it... I had a similar problem where my Angular 7 application made from scratch with the CLI worked everywhere except with Microsoft's EDGE browser when run from ng serve. (Yes, IE 11 worked, but EDGE didn't. Go figure.)

Anyway, I found this article: https://github.com/angular/angular-cli/issues/8596

A comment from user clydin provided the fix for me (even though they were talking about Safari). They said:

The error is due to the development server's live reload client code (from webpack-dev-server) which requires basic ES2015 support. This will not affect builds (production or otherwise) of the application as the live reload code is not present. Live reload functionality can be disabled, if desired, via the --no-live-reload option. Due to a defect in safari 10, enabling source maps on ng serve (the default) results in a similar error. This does not affect Safari 11.

I created a script in my package.json and when I ran this script, EDGE worked. You might also have luck with this flag.

"app-edge": "ng serve --host 0.0.0.0 --disable-host-check --no-live-reload"

answered Apr 8, 2019 at 18:10

Chris

731 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SebastianG Over a year ago

Hi Chris, It's too late for me to test it but won't live reload just have the same result is just building?

Chris Over a year ago

@MichaelB my understanding is that the --no-live-reload turns off some functionality in the browser that was causing errors when trying to "ng serve" the application. It has nothing to do with how the code is built, but how the browser loads it. It worked for me, so I didn't dig too deeply.

Collectives™ on Stack Overflow

Angular ng serve does not include polyfills -- IE11/Edge only working when running ng build --prod

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related