Angular: Como dar suporte ao IE11

Neste artigo, mostrarei as etapas que eu segui para oferecer suporte ao Internet Explorer 11 com Angular. A primeira metade disso mostrará rapidamente as etapas que você precisa executar e a segunda metade as detalhará mais detalhadamente para qualquer pessoa que deseje aprender mais. No final, adicionarei algumas dicas adicionais que podem surgir em um aplicativo do mundo real.

Vamos fazer isso

1 Etapa 1 - Segmentação do ES5

O IE11 suporta apenas o melhor do ES5. Portanto, temos que atualizar nosso tsconfig.json. Atualize a propriedade target em compilerOptions para corresponder ao seguinte, se ainda não estiver:

"compilerOptions": {"target": "es5"}

2 Etapa 2 - Atualizar lista de broswer

Abra o arquivo da lista do navegador e altere a linha não IE 9-11 para corresponder:

não IE 9-10 IE 11

3 Etapa 3 - Polyfills

Se você ou qualquer uma de suas dependências usa os recursos do ES6 +, precisará preenchê-los. O CoreJS está incluído na instalação do Angular e pode ser usado para a maioria dos polyfills necessários.

Abra o arquivo polyfills.ts e coloque o seguinte na parte superior, em BROWSER POLYFILLS:

Se você precisar de uma vitória rápida (NÃO RECOMENDADO):

importar 'core-js';

Caso contrário, tente discernir quais polyfills você precisa. Eu descobri que estes abordavam meu caso de uso:

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 / regexp'; import 'core-js / es6 / map'; import 'núcleo-js / es6 / mapa fraco'; import 'core-js / es6 / set'; import 'core-js / es6 / array'; import 'core-js / es7 / array'; // para .includes ()

A próxima parte que precisamos fazer é encontrar as seguintes linhas, próximas ao topo do polyfills.ts:

/ ** O IE10 e o IE11 requerem o seguinte para suporte ao NgClass nos elementos SVG * / // import 'classlist.js'; // Execute o `npm install --save classlist.js`.

Conforme instruído, execute: npm install --save classlist.js

e descomente a importação:

/ ** O IE10 e o IE11 requerem o seguinte para suporte ao NgClass nos elementos SVG * / import 'classlist.js'; // Execute o `npm install --save classlist.js`.

Se você usar o Angular Material ou o AnimationBuilder de @ angular / platform-browser / animations, encontre a seguinte linha:

// import 'web-animations-js'; // Execute o `npm install --save web-animations-js`.

Remova o comentário da declaração de importação e execute o npm install --save web-animations-js.

O arquivo final polyfills.ts deve ser semelhante a:

Concluído

E é isso! Você deve estar pronto!

Você pode ter problemas adicionais. Alguns deles serão discutidos na segunda metade deste artigo.

Why mas porque?

Vamos analisar rapidamente o porquê de cada etapa acima, antes de entrarmos em mais algumas dicas sobre problemas adicionais que possam surgir.

  • Alvo ES5: Bem direto, o IE11 suporta apenas ES5 ou inferior. Portanto, o TypeScript precisa Transpilar seu código para código compatível com ES5.
  • Lista de Navegadores: Essa é interessante. Precisamos dizer que estamos apoiando o IE 11, mas se não estivermos apoiando o IE 9 ou 10, é igualmente importante dizer especificamente que não estamos apoiando-os; caso contrário, o carregador diferencial incluirá muita bobagem. _ (Obrigado @wescopeland_ por esse conselho) _
  • Polyfills - Algumas das bibliotecas com as quais trabalhamos, ou código que escrevemos, se baseiam nos recursos das versões do ECMAScript que o IE11 não suporta, portanto, precisamos fornecer essa funcionalidade ao ES5 manualmente, usando soluções alternativas. Isso permitirá que o código que usa recursos modernos continue funcionando corretamente. (Observação: cada polyfill aumentará o tamanho do pacote, portanto, tenha cuidado ao escolher quais polyfills serão importados)

Tips Algumas dicas adicionais

Ok, então a motivação para escrever este artigo veio da tarefa de oferecer suporte ao IE11 em nosso aplicativo de campo verde. Foi particularmente doloroso, pois foi uma reflexão tardia que destacou problemas de compatibilidade com o suporte ao IE11:

Dependências de terceiros precisam oferecer suporte ao ES5

Isso ficou evidente rapidamente, pois os erros eram facilmente cuspidos no console. Mas destacou um problema interessante.

Agora, se queremos incluir uma nova dependência ou biblioteca em nosso aplicativo, precisamos garantir que ele seja compilado e suporte ao ES5; caso contrário, precisaremos ignorá-lo. Isso pode potencialmente limitar nossas escolhas no futuro, o que nunca é o ideal.

O IE11 não suporta propriedades personalizadas de CSS

Isso se tornou um inferno rapidamente. O IE11 não suporta propriedades personalizadas de CSS, como --primary-color: blue; o que significava que nossa solução temática estava potencialmente nas cordas.

Depois de muita investigação, descobri que ele podia ser preenchido com polifill, no entanto, os polyfills que encontrei eram lentos, tiveram um enorme impacto no tamanho do pacote e não foram totalmente perfeitos. recursos ausentes, como várias propriedades personalizadas em uma linha, entre outros problemas.

Eles também não funcionaram em nosso caso de uso específico e em nossa solução de temas, que dependia da configuração de tempo de execução das Propriedades Personalizadas.

Minha solução para isso veio do css-vars-ponyfill, que permitiu a configuração das propriedades personalizadas globais em tempo de execução. Awesome

Definindo o atributo style no IE11

O IE11 permitirá apenas a configuração do atributo de estilo de um elemento DOM com as propriedades CSS suportadas. Por exemplo, fazendo o seguinte:

document.body.style = '--primary-color: azul; tamanho da fonte: 18 px ';

resulta no seguinte no IE11, perdendo a cor --primary: blue.

Problemas de estilo decorrentes do suporte ao flexbox

O IE11 suporta flexbox, mas é muito exigente quanto a isso. Percebi que se eu quisesse usar o flex: 1; para permitir que um elemento preencha o espaço restante, no IE11, tive que definir a propriedade flex completa: flex: 1 0 auto; ou algo semelhante.

A execução do DevTools no IE11 entra em conflito com o zone.js

Sim. Por alguma razão, quando você abre as ferramentas de desenvolvimento enquanto o ng serve em execução no IE11, causa conflitos com o zone.js;

Para corrigir isso, você precisa adicionar um ZONE FLAG global para a zona para executar um código ligeiramente adicional.

Você faz isso em polyfills.ts. Localize a importação zone.js e adicione o seguinte para que fique assim:

(janela como qualquer outra) .__ Zone_enable_cross_context_check = true; import 'zone.js / dist / zone'; // Incluído na CLI Angular.

Conclusão

Não me diverti tentando fazer isso funcionar durante a semana. Agora que eu tenho suporte; Eu me sinto bem realizado . Espero que este artigo possa salvar alguém de alguma dor no futuro!

Espero que você tenha ganhado algo ao ler este artigo, talvez um petisco que você não conhecia antes.

Se você tiver alguma dúvida, faça a pergunta abaixo ou entre em contato comigo no Twitter: @FerryColum.

Publicado originalmente em https://dev.to em 10 de janeiro de 2020.