Angular 6 browser detection?

Question

I have an angular6 app that we are only supporting with chrome, but I would like a page/message to appear of the user attempts to navigate to the app in IE saying that it is not supported, either paste this link into chrome or download chrome.

Would I need a polyfill to enable the app to run on IE to show this message or is there some sort of browser detection I can use that only shows this pop up?

I know you can do browser detection in TS, which I have, but this means I need an IE polyfill so the app will load to even show the page.

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

Thoughts? Thanks!

Solution 1

In ngOninit in app.component.ts, use an if else block. In the example below, the user is taken back to the previous (non Angular) page after they close the alert, hence the rest of angular doesn't load.

if (isIE) {
    alert('Message for users about not using IE');
    window.history.go(-1);
} else {
    // the rest of ngOnInit
}

Solution 2

window.navigator.userAgent holds the user-agent as a string. To detect a browser one needs to parse the userAgent

To detect Microsoft Internet Explorer and Microsoft Edge we use the condition

window.navigator.userAgent.toLowerCase().indexOf('trident') > -1 || 
window.navigator.userAgent.toLowerCase().indexOf('edge') > -1

---

bowser

npm install bowser

Now import and get the details

import * as Bowser from "bowser";
// ......
userAgent = Bowser.parse(window.navigator.userAgent);
browser = Bowser.getParser(window.navigator.userAgent);

Example: https://stackblitz.com/edit/angular-bowser

P.S: Also note that navigator.userAgent.toLowerCase().indexOf('edge') > -1 fails for Microsoft Edge Beta(current version=79.0.309.43) as the userAgent is

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.74 Safari/537.36 Edg/79.0.309.43