Ionic 2 — Como adicionar bibliotecas Javascript (npm) no projeto

Quase sempre nos projetos, existe a necessidade de adicionar bibliotecas externas que não projetos TypeScript, porém você deseja utilizar. Um exemplo clássico é quando você deseja adicionar o Font Awesome (FA) ao projeto, para ter mais ícones que os disponíveis.

Hoje vou demonstrar como adicionar uma nova biblioteca e automaticamente ao gerar o www ela ser importada ao seu projeto. Vamos utilizar o exemplo acima do Font Awesome.

Primeiramente vamos rodar a instalação do FA.

npm install font-awesome --save

Agora vamos copiar o arquivo responsável pelos scripts de ‘copy’ no nosso projeto Ionic:

/node_modules/ionic/app-scripts/config/copy.config.js

Crie uma pasta no ROOT do seu projeto com o nome de scripts e cole o arquivo renomeando para copy.config-libs.js

Agora vamos editar nosso arquivo adicionando os parâmetros copyFontawesomeFonts e copyFontawesomeCss que executarão os comandos com os caminhos dos arquivos para copia conforme arquivo abaixo:

No seu package.json adicione a linha abaixo, que definirá ao Ionic qual scripts deverá rodar:

"config": {
  "ionic_copy": "./scripts/copy.config-libs.js"
}

Após isso, no src/index.html adicionamos o arquivo:

<link rel="stylesheet" href="assets/css/font-awesome.min.css">

E agora é só rodar, veja que na pasta www/assets/css os arquivos estarão.

ionic serve

Caso queira usar uma lib javascript e utilizá-la dentro de um controller ou service deve usar a sintaxe

(<any>window).SUALIB

Até a próxima :)