IE11 empty page using Angular 7

E

6

1

I'm testing my personal website from host. It works fine with chrome, safari, firefox, almost fine with edge, and not at all with IE11. The page displayed is index.html, the scripts don't load and so, my page is desperately white. What direction should I look at?

Below is the source code after loading, it just renders the index.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>xxxxx</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300, 400|Permanent+Marker|Fredoka+One" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="stylesheet" href="styles.e51f265321605de0a6b8.css"></head>
<body>
  <app-root></app-root>
  <script type="text/javascript" src="polyfills.46532d96d3286697c138.js">
</script>
<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js"></script><script type="text/javascript" src="main.d7a4eeb20e2af3af291c.js"></script>
</body>
        </html>

Enrapture answered 21/3, 2019 at 14:40 Comment(0)

C

3

polyfills.ts

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.


/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

Caraviello answered 21/3, 2019 at 14:50 Comment(1)

TY for your answer, this is my first angular deployment. polyfills.ts was the solution. – Enrapture 21/3, 2019 at 15:6

A

2

for angular8 user. please refer to below. :

polyfills.ts :remove number after es

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
    import 'core-js/es/symbol';
    import 'core-js/es/object';
    import 'core-js/es/function';
    import 'core-js/es/parse-int';
    import 'core-js/es/parse-float';
    import 'core-js/es/number';
    import 'core-js/es/math';
    import 'core-js/es/string';
    import 'core-js/es/date';
    import 'core-js/es/array';
    import 'core-js/es/regexp';
    import 'core-js/es/map';
    import 'core-js/es/weak-map';
    import 'core-js/es/set';
    import 'classlist.js';  // Run `npm install --save classlist.js`.

    /** IE10 and IE11 requires the following for the Reflect API. */
    import 'core-js/es/reflect';

tsconfig.json

"target": "es5", // "target": "es2015",

browerslist

IE 9-11 # For IE 9-11 support, **remove 'not'.**

credit :https://dev.to/paulinhapenedo/angular-8-and-ie-11-1ed2

Americanize answered 13/12, 2019 at 6:36 Comment(0)

M

0

You should look if you have the good polyfills.

And do you have errors in your console ?

Metacarpal answered 21/3, 2019 at 14:44 Comment(0)

T

0

Besides activating polyfills I personally also had to unchecked "Display intranet sites in Compatibilty View" under "Compatibility View Settings" in a productive environment. Maybe this applies to you, too.

Tussle answered 21/3, 2019 at 14:56 Comment(0)

P

0

I'm running angular 8 application in windows 10 with IE11.

I tried many solutions from stackoverflow. But didn't worked anything. then i tried same solutions separately, then i got to one conclusion.

This is my final solution. i don't for howmany people it will work. but for me it worked.

1. tsconfig.json

   "target": "es2015"

changed to

"target": "es5"

2. Stop your applications and start again. this Mandatory.

Pliam answered 6/1, 2020 at 13:25 Comment(0)

H

0

Here is solution (2021):

go to tsconfig.json and change the target to es5

"target": "es5"

go to browserslist and remove not as description in the file to support IE 9 -11

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

to

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

add meta tag to index.html file

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Hydnocarpate answered 1/6, 2021 at 8:42 Comment(0)

Recommended topics

Hot tags