Angular 11 with Webpack 5 - show message to IE11 users

user_14990077 0
Viewed 1018

Our company is migrating one of our frontend projects to Angular 11 with Webpack 5. We are currently on Angular 10, supporting IE11.

The reason for this migration is a shift in priority, one of or webapps needs to be as lightweight and fast as possible. We would therefor want to migrate to Angular 11 with Webpack 5, ditching IE completely, so ES5 is no longer compiled.

The problem is that some of our clients are still using IE11 in their business environment. We already show a message to use modern browsers when we detect IE11, but this message will no longer be shown when going ES2015 only.

Is there a way to show a message for IE11 users to use a different browser, instead of just a blank page, since ES2015 is not supported by IE11?

angular webpack typescript internet-explorer javascript
1 Answers

I have met this kind of issue before. I detect the browser version and if IE then render some messages you need. If not IE then render the app.

I make a new Angular 11 app and use JavaScript in src/index.html to detect browser, the code is like below:

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