Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

11
respostas

Angular no Internet Explorer

Percebi que o Angular não roda no Internet Explorer e vi um tópico por aqui mesmo na Alura que não há mais suporte. Então gostaria de saber como deixar uma mensagem para o usuário que tentar abrir um sistema em Angular no Explorer. Alguma mensagem para que ele saiba que não é erro dele.

11 respostas

Boa tarde Jéssica.

Eu vejo o Angular como um framework, assim como é o React. A questão com o IE realmente é um pouco mais complexa, pois nem tudo o que se desenvolve no Angular vai rodar 100% no IE. O que existem são restrições de alguns componentes quanto à versão. Alguns são compatíveis com IE10+ , IE11+. Então, tudo vai depender das libs que o projeto irá utilizar.

No trabalho temos grandes projetos Angular rodando com , no mínimo IE11. O mesmo compilado do projeto funciona em todos os browsers.

O que você pode fazer, é no load do seu index verificar através de uma função qual é o browser sendo executado, e adicionar um alert com a recomendação do uso em outro browser.

if(sUsrAg.indexOf("Chrome") > -1) {
    sBrowser = "Google Chrome";
} else if (sUsrAg.indexOf("Safari") > -1) {
    sBrowser = "Apple Safari";
} else if (sUsrAg.indexOf("Opera") > -1) {
    sBrowser = "Opera";
} else if (sUsrAg.indexOf("Firefox") > -1) {
    sBrowser = "Mozilla Firefox";
} else if (sUsrAg.indexOf("MSIE") > -1) {
    sBrowser = "Microsoft Internet Explorer";
}
alert("Você está utilizando: " + sBrowser);

-Cheguei a inserir o seguinte código na index, para observar a resposta em cada um dos browsers. No internet Explorer a mensagem sai undefined. Como eu poderia identificar somente o explorer para o Alert funcionar corretamente? Tendo em vista que não posso acessa-lo como acessei os outros como no exemplo.

Boa tarde!

Poderia compartilhar como está sendo recuperado o valor da variável sUsrAg ?

Se você estiver usando o navigator.userAgent, o Edge, por exemplo, não estaria na sua lista. Ele não tem na String o "MSIE". Ele traz como EDGE mesmo.

var sBrowser, sUsrAg = navigator.userAgent;

Sim, perdão. Não vi que não tinha ido a primeira linha.

Já havia feito os testes aqui, e sua cadeia de 'if' realmente só não se aplica se for o EDGE.

Minha sugestão é que você adicione mais:

else if (sUsrAg.indexOf("EDGE") > -1) { sBrowser = "Microsoft Internet Explorer EDGE"; }

Assim , para o caso do I.E., você estará coberta em todas as hipóteses. A única forma de retornar o Undefined seria no caso do Edge.

var sBrowser, sUsrAg = navigator.userAgent;

if (sUsrAg.indexOf("Safari") > -1) {
    sBrowser = "Apple Safari";
}else{

  alert("Tente com outro navegador, pois o Angular não tem suporte para esse");
}

Com esse teste, deixando somente uma condição de um browser qualquer por exemplo, eu recebo a mensagem que eu quero corretamente no Internet explorer que seria algo como "Tente com outro navegador, pois o Angular não tem suporte para esse". Já quando eu abro o Chrome, não exibe alert algum, exatamente da maneira que eu quero que ocorra, rodando o projeto normalmente onde há suporte. Acaba que esse "if" inicial fica sendo uma fachada para chegar no "else" que é o resultado que eu realmente quero quando não há suporte para um determinado navegador. Isso seria uma solução correta?

Boa tarde! Entendo que não seria uma solução. O ideal seria sua function retornar true ou false, sendo que no false abriria a mensagem.

Fiz umas alterações aqui e , aparentemente, funcionou para o IE, GC e FF:

function testaBrowser(){

var sBrowser = ""; var sUsrAg = navigator.userAgent.toLowerCase(); if(sUsrAg.indexOf("chrome") > -1) { sBrowser = "Google Chrome"; } else if (sUsrAg.indexOf("safari") > -1) { sBrowser = "Apple Safari"; } else if (sUsrAg.indexOf("opera") > -1) { sBrowser = "Opera"; } else if (sUsrAg.indexOf("firefox") > -1) { sBrowser = "Mozilla Firefox"; } else if (sUsrAg.indexOf("msie") > -1 || sUsrAg.match(/trident.rv[ :]\d+./)) { sBrowser = "Microsoft Internet Explorer"; } alert("Você está utilizando: " + sBrowser);

}

Observei uma coisa agora no código, algo que antes não estava notando. Está rodando somente o primeiro "if". Tanto que se mudar o primeiro "if" para SAFARI e a mensagem também, irá receber a mensagem do SAFARI caso abra no Chrome por exemplo. Então independente do navegador, sempre roda o primeiro "if" aparentemente, exceto no Explorer que não é identificado.

Vamos mudar a ordem então:

function testaBrowser(){ var sBrowser = ""; var sUsrAg = navigator.userAgent.toLowerCase(); if(sUsrAg.indexOf("chrome") > -1) { sBrowser = "Google Chrome"; } else if (sUsrAg.indexOf("opera") > -1) { sBrowser = "Opera"; } else if (sUsrAg.indexOf("msie") > -1 || sUsrAg.match(/trident.rv[ :]\d+./)) { sBrowser = "Microsoft Internet Explorer"; } else if (sUsrAg.indexOf("firefox") > -1) { sBrowser = "Mozilla Firefox"; } else if (sUsrAg.indexOf("safari") > -1) { sBrowser = "Apple Safari"; alert("Você está utilizando: " + sBrowser); }

  var sBrowser = ""; 
   var sUsrAg = navigator.userAgent.toLowerCase(); 
   if(sUsrAg.indexOf("opr/") > -1) { 
     sBrowser = "Opera"; 
     } else if (sUsrAg.indexOf("chrome") > -1) { 
       sBrowser = "chrome"; 
       } else if (sUsrAg.indexOf("msie") > -1 || sUsrAg.match(/trident.rv[ :]\d+./)) { 
         sBrowser = "Microsoft Internet Explorer"; 
         } else if (sUsrAg.indexOf("firefox") > -1) { 
           sBrowser = "Mozilla Firefox"; 
         } else if (sUsrAg.indexOf("safari") > -1) { 
           sBrowser = "Apple Safari"; 

           }
           alert("Você está utilizando: " + sBrowser);

Os "ifs" do seu código funcionaram, exceto o MSIE :( . O alert aparece, porem sem o +sBrowser, ou seja sem o "Microsoft Internet Explorer". Ele não é identificado de nenhuma forma.

#Edit -Um amigo meu disse que não funcionou com o OPERA e fez essa correção e rolou, porem ainda sem funcionar com o Explorer

-Inicialmente pensava em algo mais simples como:if (sUsrAg.indexOf("msie") > -1 || sUsrAg.match(/trident.rv[ :]\d+./)) { sBrowser = "Microsoft Internet Explorer";alert("Você está utilizando um navegador sem suporte, tente outro: " ); } -Porem o msie nem é identificado para testar essa hipótese

Qual a versão do I.E. que vocês estão utilizando para testar?

Acho que está faltando a configuração do EDGE.. editei o script

var sBrowser = ""; var sUsrAg = navigator.userAgent.toLowerCase(); if(sUsrAg.indexOf("opr/") > -1) { sBrowser = "Opera"; } else if (sUsrAg.indexOf("chrome") > -1) { sBrowser = "chrome"; } else if (sUsrAg.indexOf("msie") > -1 || sUsrAg.match(/trident.rv[ :]\d+./) || sUsrAg.indexOf("edge") > -1) { sBrowser = "Microsoft Internet Explorer"; } else if (sUsrAg.indexOf("firefox") > -1) { sBrowser = "Mozilla Firefox"; } else if (sUsrAg.indexOf("safari") > -1) { sBrowser = "Apple Safari";

       }
       alert("Você está utilizando: " + sBrowser);