如何避免在任何IE版本上加载Angular?

时间:2019-04-24 06:47:07

标签: angular

每个Angular index.html页面都以这种形式结束

<body>
   <app-root></app-root>
</body>

我不想支持IE,但是我在努力避免路由器并最终陷入无限循环。

基本上我想这样做:

<body>
   <noscript>
     It sucks that js is disabled for this site, <a href="/index-basic.html">go here.</a>
   </noscript>
   <script>
    if (document.documentMode){ //ie
       window.location.href = "/index-basic.html"
    }
   </script>
   <app-root></app-root>
</body>

我只是不确定如何实现此目标,因为这对我来说是新的。我是否需要配置某些内容以防止index-basic.html充当路由?我似乎无法逃脱路由器。

是否有直接的解决方案?

3 个答案:

答案 0 :(得分:0)

您可以使用以下示例来实现它:

<!--[if lt IE 9]>
Insert your IE code, like possible redirection or alteration of your page
<![endif]-->

这里是IE最早的9版本的示例,但是您可以对其某些版本或全部版本进行修改。

答案 1 :(得分:0)

这可能会帮助:

let isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent)

答案 2 :(得分:0)

如果您根本不想加载Angular,则可以采用这种方法。只需确保重定向到没有加载Angular依赖项的现有页面即可。

换句话说,您应该拥有默认的index.html(即“ Angular”页面)和另一页,以使用您描述的方法进行重定向。

在您的Angular的index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Awesome App</title>
    <base href="/">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.png">
</head>
<script type="text/javascript" src="assets/js/browser-check.js"></script>
<body>
<app-root>
</app-root>
</body>
</html>
  

browser-check.js包含您的重定向逻辑

最后是一个独立的html文件,其中包含您要在浏览器为IE时显示的消息:

forbidden.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Not supported Browser</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.png">
</head>
<body>

<section>
  <h1>Unsupported browser</h1>
  <p>The navigator you are using is not supported. Consider upgrade your browser.</p>
</section>
</body>
</html>

我希望这会有所帮助:)