admin管理员组

文章数量:1336576

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;
}

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.

  • javascript
  • html
  • angular
  • internet-explorer
Share Improve this question asked Aug 7, 2021 at 9:14 Han CheHan Che 8,51919 gold badges76 silver badges121 bronze badges 1
  • 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

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:

  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>

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 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742411771a2469934.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。