Angular 2/4/5 não está funcionando no IE11

124

Estou tentando descobrir por que meu aplicativo angular 2 está parado ao mostrar Carregando ... ao executar no IE 11.

Seguindo a sugestão de alguém, eu tentei esse desentupidor, publicado por alguém no estouro de pilha, no Chrome e no IE 11. Funciona bem no Chrome, mas falha no IE 11. O mesmo erro persistiu ao dizer "Carregando ..."

O plunker é: https://plnkr.co/edit/6zVFbrH5yohwc714gBbk?p=preview

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Router Sample</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/http.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
      System.import('src/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

Alguém tem alguma idéia de por que o IE 11 falha ao executar o aplicativo angular 2?

Obrigado!

angular  typescript  internet-explorer 
— Pat Bone Triturador Laplante
fonte
A resposta é usar 2.0.0-beta.0 por enquanto.
— Pat Bone Trusher Laplante

Respostas:

187

A versão mais recente do angular é configurada apenas para navegadores sempre-verdes por padrão ...

A configuração atual é para os chamados navegadores "sempre verdes"; as últimas versões dos navegadores que se atualizam automaticamente. Isso inclui Safari> = 10, Chrome> = 55 (incluindo Opera), Edge> = 13 na área de trabalho e iOS 10 e Chrome no celular.
Isso também inclui o Firefox, embora não mencionado.

Consulte aqui para obter mais informações sobre o suporte ao navegador, além de uma lista de polyfills sugeridos para navegadores específicos. https://angular.io/guide/browser-support#polyfill-libs

Isso significa que você precisa habilitar manualmente os polyfills corretos para que o Angular funcione no IE11 e abaixo.

Para conseguir isso, entre em polyfills.ts(na srcpasta por padrão) e descomente as seguintes importações:

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/set';

Observe que o comentário está literalmente no arquivo, portanto, é fácil encontrá-lo.

Se você ainda está tendo problemas, você pode voltar a targetpropriedade para es5em tsconfig.jsoncomo @MikeDubsugerido. O que isso faz é alterar a saída de compilação de quaisquer es6definições para es5definições. Por exemplo, funções de seta gorda ( ()=>{}) serão compiladas em funções anônimas ( function(){}). Você pode encontrar uma lista dos navegadores suportados pelo es6 aqui .

Notas

• Nos comentários, fui perguntado @jackOfAllse os polyfills do IE11 estão carregados, mesmo que o usuário esteja em um navegador sempre verde que não precise deles. A resposta é: sim, eles são! A inclusão dos polyfills IE11 levará seu arquivo de polyfill de ~162KBaté ~258KB8 de agosto de 17. Eu investi na tentativa de resolver isso, no entanto, não parece possível no momento.

• Se você estiver recebendo erros no IE10 e abaixo, entre em você package.jsone faça o downgrade webpack-dev-serverpara 2.7.1especificamente. Versões maiores que isso não são mais compatíveis com versões "mais antigas" do IE.

— Zze
fonte
3
Meu projeto angular 5 também tem o mesmo erro, mesmo que eu não tenha comentado o polyfill para o IE, ainda não funcione no navegador do IE. Muito estranho ....
— Abby
Remova o comentário de todas as importações mencionadas e a NgClass abaixo disso. Por fim, instale "npm install --save classlist.js". Isso funcionou no meu caso.
— Vaibhav
2
@dudewad Eu estava experimentando criar dois pacotes separados, um explicitamente para o IE11, e depois agrupar esse pacote em um comentário condicional do IE que o impediria de aparecer no chrome.
— ZZE
1
@Zze bem, isso certamente é minucioso da sua parte. Legal, eu gosto disso.
— Dudewad 13/0818
1
Os comentários condicionais do @Zze foram removidos no IE10; eles são suportados apenas no IE5-9. Portanto, seu pacote IE não seria carregado para o IE10 +, a menos que você tenha feito algum agente do usuário farejando para adicionar seu pacote à página em tempo de execução.
— bmcminn
22

Eu tinha exatamente o mesmo problema e nenhuma das soluções funcionou para mim. Em vez disso, adicione a seguinte linha no (homepage) .html sob a correção <head>.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Alex W.
fonte
Considerando as informações deste SO stackoverflow.com/questions/26346917/… , a recomendação para usar o X-UA-Compatible parece ser inválida.
— Lubiluk 6/01
19

Encontrei esta questão hoje. Encontrei uma solução no GitHub que não requer a instalação de uma versão posterior do beta.

Adicione o seguinte script ao seu html:

<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

Isso resolveu o problema para mim. Para obter mais detalhes, você pode acompanhar a questão do github aqui: https://github.com/angular/angular/issues/7144

— Ashley Grenon
fonte
2
esta solução não funcionou para mim :( ... [no projeto VS2015 em execução no IE]
— Ceylan Mumun Kocabaş 26/04/16
12

Em fevereiro de 2017

Usando um projeto Angular-Cli , todas as linhas no polyfills.tsarquivo já estavam descomentadas, portanto todos os polyfills já estavam sendo utilizados.

Encontrei esta solução aqui para corrigir meu problema.

Para resumir o link acima, o IE não suporta funções lambda arrow / fat arrow, que são um recurso do es6 . ( Isso ocorre se polyfills.ts não funcionar para você ).

Solução : você precisa segmentar es5 para que ele seja executado em qualquer versão do IE. O suporte para isso foi introduzido apenas no novo Edge Browser da Microsoft.

Isso é encontrado em src/tsconfig.json:

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
— MikeDub
fonte
Esta resposta é muito enganadora. Os polyfills são os scripts que tornam o IE 9 e superior compatíveis com os padrões ES6, conforme mostrado aqui: angular.io/docs/ts/latest/guide/browser-support.html Portanto, não importa se o navegador suporta nativamente as funções de seta, os polyfills atenuam completamente esse problema.
— Zze
8
Como é que experimentei no meu caso ... enganosa? Os polyfills já eram descomentados e não corrigiram o problema que eu estava enfrentando no IE11. Dificilmente acho que isso é digno de um voto negativo.
— MikeDub 27/02
Depois de reler isso, entendo o que você está tentando dizer, mas da maneira como está atualmente redigida, parece que você precisa alterar manualmente todos os seus .tsarquivos do uso da seta gorda para funções anon. Eu acho que você deve cortar uma citação desse link sobre como a saída do compilador é diferente se você alterar o destino do script de ecma que daqui em diante atenua o problema.
— Zze
5
Além disso, já estou direcionando es5 no meu tsconfig e ainda tenho problemas.
— Gh0st 02/10/19
1
@ MikeDub Tentei usar sua solução, mas ela não está funcionando para o IE11. Você pode me fornecer uma melhor abordagem.
— Prasanna Sasne
11

Você precisará ajustar o arquivo polyfills.ts para os navegadores de destino descomentando as seções apropriadas.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
— Jigar Bhatt
fonte
1
Isso é ótimo. Obrigado.
— AtLeastTheresToast 02/10/19
10

Para mim, com o iexplorer 11 e o Angular 2, corrigi todos os problemas acima, fazendo duas coisas:

em index.html adicione:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

no comentário src \ polyfills.ts :

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
— Belen Martin
fonte
1
Sim, isso está funcionando para o IE11, mas não para o IE10:ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'setPrototypeOf' at EmptyError (http://localhost:4200/vendor.js:102653:9)
— Junior Mayhé
10
  1. Remova o comentário de algumas importações no arquivo polyfill.ts.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
Expandir snippet

Install npm Pacakages Observe que existem alguns comandos de instalação do npm nos comentários. Se você estiver usando uma versão inicial do Angular CLI, também poderá haver um terceiro. Para as versões 7, 6 e 1.7 da CLI Angular, é necessário executar:

npm install --save classlist.js

npm install --save web-animations-js

agora abra o IE e processe seu aplicativo e verifique :)

— Todos
fonte
8

Em setembro de 2017 (versão do nó = v6.11.3, versão npm = 3.10.10), foi isso que funcionou para mim (obrigado @Zze):

Editar polyfills.ts e remova o comentário das importações necessárias para o IE11.

Mais precisamente, edite polyfills.ts(localizado na srcpasta por padrão) e apenas remova o comentário de todas as linhas necessárias para o IE11 (os comentários dentro do arquivo explicam exatamente quais importações são necessárias para executar no IE11).

Um pequeno aviso: preste atenção ao descomentar as linhas de classlist.jse web-animations-js. Essas linhas comentadas têm um comentário específico cada: você deve executar os comandos npm associados antes de descomentá-los ou o processamento do polyfills.ts será interrompido.

Como uma explicação, os polyfills são trechos de código que implementam um recurso em um navegador da Web que não o suporta. É por isso que, na configuração padrão do polyfills.ts, apenas um conjunto mínimo de importações está ativo (porque está direcionado aos chamados navegadores "sempre verdes"; as últimas versões dos navegadores que se atualizam automaticamente ).

— Ekeko
fonte
8

EDIT 2018/05/15 : Isso pode ser alcançado com uma meta tag ; adicione essa tag ao seu index.html e desconsidere esta postagem.

Esta não é uma resposta completa para a pergunta (para obter a resposta técnica, consulte a resposta de @ Zze acima ), mas há uma etapa importante que precisa ser adicionada:

MODO DE COMPATIBILIDADE

Mesmo com os polyfills apropriados, ainda há problemas com a execução de aplicativos Angular 2+ usando os polyfills no IE11. Se você estiver executando o site em um host da intranet (por exemplo, se estiver testando em http: // localhost ou outro nome de domínio local mapeado), acesse as configurações do Modo de Exibição de Compatibilidade e desmarque "Exibir sites da intranet no Modo de Exibição de Compatibilidade", já que o Modo de Exibição de Compatibilidade do IE11 quebra algumas das convenções incluídas nos polyfills ES5 para Angular.

insira a descrição da imagem aqui

— Shotgun Ninja
fonte
1
Se você seguir esta solução, precisará fazer isso em todos os clientes que executam seu aplicativo. A adição de uma tag especial ao seu arquivo html força o navegador a executar a versão mais recente disponível, em vez do modo de compatibilidade. Consulte a seguinte resposta para encontrar a tag: stackoverflow.com/a/47777695/4628364
— Poly
2
Na minha experiência, se o seu aplicativo for veiculado em um host da intranet, o uso dessa metatag não substitui a configuração padrão do IE 11 para 'Exibir sites da intranet no modo de compatibilidade'. Os usuários do aplicativo da intranet ainda precisarão entrar e desmarcar manualmente essa opção, que é menos que o ideal. Atualmente, estou procurando uma solução alternativa - talvez compilando no ES5 em vez do ES6.
— Kyle Vassella
6

Eu tenho um aplicativo Angular4, mesmo para mim também não estava funcionando no navegador IE11, fiz abaixo as alterações, agora está funcionando corretamente. Basta adicionar o código abaixo no arquivo index.html

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Você só precisa descomentar estas linhas abaixo do arquivo polyfills.ts

import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Estas duas etapas acima resolverão o seu problema. Informe-me se houver alguma coisa lá. Obrigado!!!

— Sanjay Tiwari
fonte
Eu tenho já thses 2 partes descomentada mas ainda não está funcionando, você tem outra solução
— Menna Ramadã
5

Se você ainda tiver problemas para que nem todas as funções JavaScript estejam funcionando, adicione esta linha em seus polyfills. Ele corrige o método 'values' ausente:

import 'core-js/es7/object';

E essa linha corrige o método 'inclui' ausente:

import 'core-js/es7/array'
— cristão
fonte
4

Eu estava com o mesmo problema: se você ativou Exibir sites da intranet no Modo de exibição de compatibilidade, o polyfills.ts não funcionará, você ainda precisará adicionar a seguinte linha, conforme informado.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Ivan Lopez
fonte
2

O que funcionou para mim é que segui as etapas a seguir para melhorar o desempenho de meus aplicativos no IE 11 1.) No arquivo Index.html, adicione as seguintes CDNs

<script src="https://npmcdn.com/angular2@2.0.0- 
 beta.17/es6/dev/src/testing/shims_for_IE.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.201711092/classList.min.js"></script>

2.) No arquivo polyfills.ts e adicione a seguinte importação:

import 'core-js/client/shim';
— gaurav gupta
fonte
2

Em polyfills.ts

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';

import 'core-js/es6/array';
import 'core-js/es7/array';

import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
— Kuldip D Gandhi
fonte
2

Se nenhuma das outras soluções funcionar para você, vale a pena investigar a origem do problema. Pode ser que um módulo npm insira diretamente o código ES6, que não pode ser transpilado.

No meu caso, eu tive o

SCRIPT1002: Erro de sintaxe vendor.js (114536,27) na seguinte linha:

const ucs2encode = array => String.fromCodePoint(...array);

Eu procurei na pasta node_modules e descobri de qual arquivo a linha veio. Aconteceu que o culpado era punycode.js que na versão 2.1.0 usa ES6 diretamente.

Depois de fazer o downgrade para a 1.4.1, que usa o ES5, o problema foi resolvido.

— typhon04
fonte
1
Muito obrigado pela sua resposta. Embora não tenha resolvido o problema, ele me ajudou a encontrar o módulo causador de problemas e informar o autor sobre o problema.
— Lucifer63
2

Como resolver esse problema no Angular8

Remova o comentário polyfills.ts import 'classlist.js'; e import 'web-animations-js';instale duas dependências usando npm install --save classlist.jse npm install --save web-animations-js.

atualizar tsconfig.jsoncom"target":"es5",

depois ng serveexecute o aplicativo e abra no IE, ele funcionará

— Rijo
fonte
1

  1. Remova o comentário da seção IE no src / polyfill.js,

    / ** O IE10 e o IE11 requerem o seguinte para suporte ao NgClass em elementos SVG * /

    import 'classlist.js';

  2. Se houver algum erro de compilação por falta de pacote,

    npm install classlist.js --save-exact

  3. Certifique-se de incluir a linha abaixo para definir o modo de documento padrão do IE. Caso contrário, ele será aberto na versão 7

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Sudheer Muhammed
fonte
0

Eu tentei todas as soluções neste segmento, bem como muitos outros, sem sucesso. O que acabou corrigindo isso para mim foi atualizar todos os pacotes do meu projeto, incluindo alterações de versão MAJOR. Assim:

  1. Executar npm desatualizado
  2. Atualize package.json com o número mostrado na coluna atual a partir dos resultados (isso pode interromper o seu projeto, tenha cuidado)
  3. Execute a instalação npm
  4. Verifiquei também que os polyfills também não foram comentados, conforme observado nas outras respostas.

É isso aí. Eu gostaria de poder identificar qual biblioteca foi a culpada. O erro real que eu estava recebendo era "Erro de sintaxe" no vendor.js no Angular 6.

— Jordânia
fonte
0

O Angular 9 pronto para uso deve funcionar absolutamente bem no IE11 agora.

Tentei todas as sugestões listadas aqui e nenhuma delas funcionou. No entanto, consegui rastreá-lo para uma biblioteca específica em que estava importando app.module( ZXingScannerModulepara ser mais preciso). Se seu aplicativo falhar no IE11 na primeira página, tente remover as bibliotecas uma de cada vez e faça o check-in no IE11 - isso foi completamente esquecido em todos os meus erros de aviso de criação. Se você achar que é esse o caso, considere compartimentar a área do seu site que usa essa biblioteca como um módulo carregado preguiçosamente.

— Andrew Junior Howard
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.