angular检测ie浏览器，并给用户提示

需求

angular不支持ie，需要给用户提示并引导使用谷歌浏览器。

技术方案

先上图，图能看明白逻辑的就不用往下看了，对您有帮助的请点个赞哈。
此法使用于vue，react, angualar 等不支持ie浏览器的前端框架。
我用的是angular9。

第一步：检测是否是ie浏览器

js检测ie的代码网上一大堆，但是这个检测代码放哪里合适呢？

1. 放到angular编译之后的代码中。
   结果：程序根本跑不到那里。

2. 放到index.html中。
   结果比较合理。

总结：ie的检测代码需要放在index.html的head中，如果发在angular的app.component.ts中根本泡不到那个位置，哈哈。

第二部：js检测ie

检测ie11及以下

<script>
  (function () {
    console.log('agent: ', navigator.userAgent);
    var agent = navigator.userAgent.toLowerCase();
    var isIE = agent.indexOf("compatible") > -1 && agent.indexOf("msie" > -1); //判断是否IE<11浏览器  
    var isIE11 = agent.indexOf('trident') > -1 && agent.indexOf("rv:11.0") > -1;
    if(isIE || isIE11) {
      alert('不支持IE浏览器，请使用谷歌浏览器');
    } else {
      console.log('次浏览器不是ie');  
    }
  })();
</script>

简单的流程至此走完

额外知识

mac中用safari测试ie

如果是用mac开发的小伙伴会发现没有ie浏览器可测，每次需要打包发到测试服再找同事的window电脑来测试很麻烦。

哈哈，接下来安利一个小技巧，可以帮大忙。

1. 打开safari

2. 点击开发
   没有显示开发的小伙伴百度一下

3. 点击用户代理

4. 选择ie
   

5. 没有ie的小伙伴不要灰心，大不了咱自己配置

// ie 10
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)。
 // ie 11
mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; rv:11.0) like gecko

点击其他，将上边的代码粘贴到输入框中，就可以模拟ie10，或11了。

ok到此就结束了，如果帮您解决了问题，请打个赞哈。