download

Utilizando polyfill INTL no Ionic 2

Começamos um projeto novo aqui na Tegra e para ele decidimos utilizar Ionic 2 pelo seu desempenho em relação ao Ionic 1.

 

A ideia deste post é mostrar um problema comum que boa parte dos desenvolvedores estão passando hoje ao fazer build para iOS.

 

Os pipes padrões do Angular 2 utilizam a especificação INTL para fazer as formatações de data e número.
Segue a documentação da INTL:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl

Porém nem todos os browsers possuem essa especificação implementada, neste caso o Safari, para resolver isso, utilizamos polyfill, como mostrado na issue abaixo:
https://github.com/driftyco/ionic/issues/5721

 

Basta adicionar a seguinte linha no head do seu index.html:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

 

O problema dessa abordagem é que o usuário precisará ter internet para fazer o download do polyfill e isso poderá ocorrer toda vez que ele abrir o app.

 

Uma outra solução seria instalar o INTL como uma dependência do projeto.

npm install --save intl

 

Adicionar no gulpfile.js, as seguintes linhas ao buildBrowserify da task watch e build, ficando assim:
buildBrowserify({
watch: true,
src:[
'./app/app.ts',
'./typings/index.d.ts',
'./node_modules/intl/index.js',
'./node_modules/intl/locale-data/jsonp/pt-BR.js']
}).on('end', done);

O código acima inclue os arquivos intl ao javascript final do aplicativo ionic. Assim sua aplicação não dependerá de internet para ter o polyfill do INTL.

 

Abraço e até a próxima!

Celso Wo

Apreciador de inovação em tecnologia nas mais diversas plataformas. Possui grande conhecimento em várias linguagens de desenvolvimento, entre elas Java, C, Objective C, PHP, Lua, Python e Ruby. Procura sempre focar em inovações nas áreas de inteligência artificial, redes neurais, aprendizagem de máquina e usabilidade.

Um comentário em “Utilizando polyfill INTL no Ionic 2

  1. Celso obrigado pela iniciativa.

    Meu caro, eu segui a sua dica do polyfill exatamente como está descrito. Mas não rolou de fazer funcionar no mobile. Eu restei no iphone IOS 9.x e testei no android kitkat, ambos não interpretaram o polyfill.
    Vou detalhar melhor, eu estou tentando usar o recurso do currency para converter em moeda usando o pipe. No browser funciona normalmente, mas quando gero o apk nada funciona e capota a aplicação.
    Eu andei lendo foruns por ai e notei que as dicas são iguais as suas, exceto a parte que você ensina instalar o intl para não ter que se prender a conexão com a net.

    Eu gostaria de saber se você tem alguma dica para me dar, ou se eu deixei algo passar batido.

    Resumindo o que eu fiz:
    Primeiro tentei somente com a tag script no header do html do arquivo index.html que fica na pasta www do projeto ionic. Resultado: não funcionou.
    Segundo, testei instalando o intl e fazendo a configuração no arquivo gulp. Resultado também não funcionou.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>