Angular 6 浏览器检测？

Question

我有一个 angular6 应用程序，我们只支持 chrome，但我希望出现一个页面/消息，显示用户尝试在 IE 中导航到该应用程序，说它不受支持，将此链接粘贴到 chrome 中或下载 chrome .

我是否需要一个 polyfill 来使应用程序能够在 IE 上运行以显示此消息，或者是否有某种浏览器检测我可以使用仅显示此弹出窗口？

我知道您可以在 TS 中进行浏览器检测，我有，但这意味着我需要一个 IE polyfill，以便应用程序加载以显示页面。

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

想法？谢谢！

Answer 1

在 app.component.ts 的 ngOninit 中，使用 if else 块。在下面的示例中，用户在关闭警报后返回到上一个（非 Angular）页面，因此 Angular 的其余部分不会加载。

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