javascript - How to display Internet explorer not supported in angular without importing pollyfills

With IE officially deprecated in Angular 12, I want to display a static warning in my page to notify the user to switch to a supported browser.

I'm using a simple snippet like this in the index.html to append a css class to the body, when then displays a div element.

    <body class="mat-typography">
        <script>
            (function msieversion() {
                const ua = window.navigator.userAgent;
                const msie = ua.indexOf('MSIE ');
                if (msie > 0) {
                    document.body.classList.add('is-internet-explorer');
                }
            })();
        </script>
        <div class="ie">isIE</div>
        <app-root></app-root>
    </body>

.is-internet-explorer {
    .ie {
        display: flex;
    }
    app-root{
        display: none;
    }
}
.ie {
    display: none;
}

But I'm getting errors in internet explorer, that runtime.js, polyfills.js, vendor.js and main.js wont run. I assume it is because of missing polyfills and the tsconfig target setting, that these won't run.

Is there a way to "prevent" angular from inserting or executing these script tags in the first place? I've tried to remove them in my if (msie > 0) block, but that doesn't work.

setTimeout(() => {
    const x = document.body.querySelectorAll('script[defer]');
    x.forEach((i) => document.body.removeChild(i));
});

My goal is to acplish this without having to adjust polyfill and tsconfig settings, to keep the build size to a mininum.

With IE officially deprecated in Angular 12, I want to display a static warning in my page to notify the user to switch to a supported browser.

I'm using a simple snippet like this in the index.html to append a css class to the body, when then displays a div element.

    <body class="mat-typography">
        <script>
            (function msieversion() {
                const ua = window.navigator.userAgent;
                const msie = ua.indexOf('MSIE ');
                if (msie > 0) {
                    document.body.classList.add('is-internet-explorer');
                }
            })();
        </script>
        <div class="ie">isIE</div>
        <app-root></app-root>
    </body>

.is-internet-explorer {
    .ie {
        display: flex;
    }
    app-root{
        display: none;
    }
}
.ie {
    display: none;
}

Is there a way to "prevent" angular from inserting or executing these script tags in the first place? I've tried to remove them in my if (msie > 0) block, but that doesn't work.

setTimeout(() => {
    const x = document.body.querySelectorAll('script[defer]');
    x.forEach((i) => document.body.removeChild(i));
});

My goal is to acplish this without having to adjust polyfill and tsconfig settings, to keep the build size to a mininum.

Share Improve this question asked Aug 7, 2021 at 9:14 Han Che 8,51919 gold badges76 silver badges121 bronze badges

I wonder if these errors are due to the fact that the scripts are included - or because Angular starts up. You could conditionally prevent angular from booting by checking for IE in main.ts. But not sure if that resolves these errors.. – MikeOne Commented Aug 7, 2021 at 13:32

Add a ment |

2 Answers 2

Sorted by: Reset to default 8

The errors showing in IE is due to the scripts still load in IE. If you don't want to see the errors in IE, you can load an unsupported html page when the browser is IE.

Besides, it seems that there're some issues in your detecting IE code. I made some changes, and you can refer to my steps below, I test it and it works well:

Add a unsupported.html file in the root of src folder. Example unsupported.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

<body>
    <h1>The app is not supported in IE. Please use other browsers!</h1>
</body>

</html>

Add "src/unsupported.html" in angular.json assets property. For example:

"assets": [
          "src/favicon.ico",
          "src/assets",
          "src/unsupported.html"
 ],

Detect browser in src/index.html, if IE then redirect to unsupported.html, if not then render <app-root>. The code is like below:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <script type="text/javascript">
      var msie = /msie\s|trident/i.test(window.navigator.userAgent);
      if (msie) {
        //IE, redirect page
        window.location.href = "./unsupported.html";
      }
      else {
        //render app
        var elem = document.createElement("app-root");
        document.body.appendChild(elem);
      }
  </script>
</body>

</html>

I suggest to display an alert before IE encounters any problem. I use below code:

<body>
  <script>
    function isUserUsingIeBrowser() {
      return /MSIE|Trident/.test(window.navigator.userAgent);
    }

    if (isUserUsingIeBrowser()) {
      alert('IE not supported');
    }
  </script>
  <app-root></app-root>
</body>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to display Internet explorer not supported in angular without importing pollyfills - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)