Angular 11 和 Webpack 5 - 向 IE11 用户显示消息答案

【问题标题】：Angular 11 with Webpack 5 - show message to IE11 usersAngular 11 和 Webpack 5 - 向 IE11 用户显示消息
【发布时间】：2021-01-12 10:54:22
【问题描述】：

我们公司正在使用 Webpack 5 将我们的一个前端项目迁移到 Angular 11。我们目前使用 Angular 10，支持 IE11。

这种迁移的原因是优先级的转变，其中一个或 web 应用程序需要尽可能轻量级和快速。因此，我们希望使用 Webpack 5 迁移到 Angular 11，完全抛弃 IE，因此不再编译 ES5。

问题是我们的一些客户仍在他们的商业环境中使用 IE11。当我们检测到 IE11 时，我们已经显示了使用现代浏览器的消息，但仅在 ES2015 时将不再显示此消息。

由于 IE11 不支持 ES2015，有没有办法向 IE11 用户显示消息以使用不同的浏览器，而不仅仅是空白页？

【问题讨论】：

标签： javascript angular typescript internet-explorer webpack

【解决方案1】：

我以前遇到过这种问题。我检测浏览器版本，如果 IE 然后呈现您需要的一些消息。如果不是 IE，则渲染应用程序。

我制作了一个新的 Angular 11 应用并在 src/index.html 中使用 JavaScript 来检测浏览器，代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular11test</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">
    function get_browser() {
      var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
      if (/trident/i.test(M[1])) {
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return { name: 'IE', version: (tem[1] || '') };
      }
      if (M[1] === 'Chrome') {
        tem = ua.match(/\bOPR\/(\d+)/)
        if (tem != null) { return { name: 'Opera', version: tem[1] }; }
      }
      if (window.navigator.userAgent.indexOf("Edge") > -1) {
        tem = ua.match(/\Edge\/(\d+)/)
        if (tem != null) { return { name: 'Edge', version: tem[1] }; }      
      }
      M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
      if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
      return {
        name: M[0],
        version: +M[1]
      };
    }

    var browser = get_browser()
    var isSupported = isSupported(browser);

    function isSupported(browser) {
      var supported = false;
      if (browser.name === "Chrome" && browser.version >= 48) {
        supported = true;
      } else if ((browser.name === "MSIE" || browser.name === "IE") && browser.version <= 11) {
        supported = false;
      } else if (browser.name === "Edge") {
        supported = true;
      }
      return supported;
    }

    if (!isSupported) {
      //render unsupported message
      document.write("<h1>The app is not supported in IE. Please use other browsers!</h1>");
    }
    else{
      //render app
      var elem = document.createElement("app-root");
      document.body.appendChild(elem);
    }
  </script> 
</body>
</html>

【讨论】：

谢谢，我可以确认这是可行的。你能解释一下你是如何只针对 ES2015 的吗？我更改了 browserslist 文件，但它仍然构建 ES5 和 ES2015，因为我无法让 Webpack 5 工作。
似乎我的解释有点错误，我的意思是在我的 tsconfig.json 中是"target": "es2015"。很抱歉有任何误导。对于如何仅在 Angular 中定位 ES2015，我建议您可以提出一个新问题以从社区获得更好的帮助。感谢您的理解。
谢谢，这里提问link