CODEWITHSUNDEEP
javascripthtmlangularinternet-explorer
Han Che
Han Che

Reputation: 8519

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.

enter image description here

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 accomplish this without having to adjust polyfill and tsconfig settings, to keep the build size to a mininum.

Upvotes: 3

Views: 3509

Answers (2)

Borneo777
Borneo777

Reputation: 181

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>

Upvotes: 0

Yu Zhou
Yu Zhou

Reputation: 12961

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:

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

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

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

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

Upvotes: 8

Related Questions