如何在不导入 polyfill 的情况下显示 angular 不支持的 Internet Explorer

Question

随着 IE 在 Angular12 中正式弃用，我想在我的页面中显示静态警告以通知用户切换到受支持的浏览器。

我在 index.html 中使用了这样一个简单的片段将 css class 附加到正文，然后显示 div 元素。

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

但我在 Internet Explorer 中遇到错误，runtime.js、polyfills.js、vendor.js 和 main.js 不会运行。我假设是因为缺少 polyfill 和 tsconfig 目标设置，所以这些不会运行.

有没有办法“阻止”angular 首先插入或执行这些脚本标签？我试图在我的 if (msie > 0) 块中删除它们，但这不起作用。

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

我的目标是在无需调整 polyfill 和 tsconfig 设置的情况下完成此操作，以将构建大小保持在最小值。

Answer 1

IE 中显示的错误是由于脚本仍在 IE 中加载。如果您不想在 IE 中看到错误，可以在浏览器为 IE 时加载不受支持的 html 页面。

另外，你的IE代码检测好像有问题。我做了一些修改，你可以参考我下面的步骤，我测试了一下，效果很好：

在 src 文件夹的根目录中添加一个 unsupported.html 文件。示例 unsupported.html 文件：

<!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>

在angular.jsonassets属性中添加"src/unsupported.html"。例如：

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

在src/index.html中检测浏览器，如果IE则重定向到unsupported.html ，如果没有则渲染 <app-root>。代码如下：

<!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>

如何在不导入 polyfill 的情况下显示 angular 不支持的 Internet Explorer

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

html

javascript

internet-explorer

angular