16

I have a problem with demonstrating warning page, if Angular 2 app doesn't support browser. I have tried to use routing system, but actually it didn't help. Here is my index page. How can I redirect(show to user) warning page if browser is unsupported? Maybe I need add some extra script to body, but what about <app> tag?

<!DOCTYPE html>
<html>
<head>
    <base href="/">
</head>
<body>
    <app>Loading...</app>
</body>
</html>
pavel
  • 187
  • 1
  • 2
  • 8
  • Duplicate ?: https://stackoverflow.com/questions/36877151/angular-2-check-whether-users-browser-is-compatible – Vega Sep 08 '17 at 13:46

2 Answers2

16

I think you should use clear JavaScript code:

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };
    
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

More methods to detect more browsers you can find in this question: Correct way to use Modernizr to detect IE?

If you want support IE 11/10/9 in your Angular app - add polyfills. For older IE version detection use code below:

function detectIE() {
var ua = window.navigator.userAgent;

var msie = ua.indexOf('MSIE ');
if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}

var trident = ua.indexOf('Trident/');
if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}

var edge = ua.indexOf('Edge/');
if (edge > 0) {
   // Edge (IE 12+) => return version number
   return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}

// other browser
return false;
}

or

<!--[if lt IE 9]>
Place Content here for Users of Internet Explorer 9 or lower.
<![endif]-->

in HTML code.

Krzysztof Raciniewski
  • 4,735
  • 3
  • 21
  • 42
  • Ok, if I'll write clean javascript code, what should i do with tag. Can I just remove it from the DOM? If i can, when it should be done? I think you have already mention, I am a newbie in Angular. – pavel Sep 08 '17 at 15:10
  • Yes, you can remove tag(but then you should load this script before AngularJS code) or redirect user to static page with not-supported message, example: http://yourdomain/browser-not-supported.html (this is preffered way) – Krzysztof Raciniewski Sep 08 '17 at 15:16
  • 11
    Whoa, that's a wholalot of code for simple `if (/MSIE |Trident\/|Edge\//.test(window.navigator.userAgent)) { window.location.replace("unsupported.html"); }` – Endrju Apr 23 '20 at 06:46
3

if you don't need know which browser or version, exists other way.

In index.html, check the content of app-root tag.

...
<script>
  function checkSupport() {
    var appRoot = document.getElementsByTagName('app-root')[0];
    if (appRoot && appRoot.innerHTML === '') {
      appRoot.innerHTML = '<h1>Old Browser Man!</h1> <p>Please, be smart and update it!</p>';
    }
  }
</script>

<body class="mat-typography theme" onload="checkSupport()">
  <app-root></app-root>
</body>
...
Bruno Oliveira
  • 39
  • 3
  • 2
    Warning: This will not work for example on safari (iOS safari 16.1+, at least in Angular v16+) as app-root's innerHTML is still empty onload. But filled after setTimeout(()=>{},0) – reifi May 31 '23 at 16:48
  • Another problem is, that if you have a javascript error, like a typo or something, angular will fail to bootstrap and you'll get this error. Problem is that, this would be an inaccurate error message. Your browser might be the latest version of Chrome, and you'll still get (Browser is old) just because of an error in your js. – arm Jul 05 '23 at 10:19