Menu

Ionic incluyendo librerías externas

tipsionic2 - May 31, 2017 por Javier González Rodríguez
ionic3.2.0ionic-app-scripts1.3.7cordova-cli7.0.0ionic-cli3.0.0

Con esta técnica podremos incluir librerías externas a nuestra aplicación como Font Awesome icons.

1. Instalar Ionic y Cordova.

$# npm install -g cordova ionic

2. Creamos una app con el Starter Tutorial.

$# ionic start myApp tabs
$# cd myApp

3. Incluimos alguna librería externa como font awesome icons

package.json

 "dependencies": {
    "font-awesome": "^4.7.0"
  }

4. Modificar uno de los parámetros de configuración de las task de ionic específicamente el de ionic_copy por uno custom en el package.json.

myApp\scripts\custom.lib.js

  "config": {
    "ionic_copy": "./scripts/custom.lib.js"
  },

5. Agregar las librerias externas junto a la configuración de Ionic.

Configuración original

	// this is a custom dictionary to make it easy to extend/override
	// provide a name for an entry, it can be anything such as 'copyAssets' or 'copyFonts'
	// then provide an object with a `src` array of globs and a `dest` string
	module.exports = {
	  copyAssets: {
		src: ['/assets/**/*'],
		dest: '/assets'
	  },
	  copyIndexContent: {
		src: ['/index.html', '/manifest.json', '/service-worker.js'],
		dest: ''
	  },
	  copyFonts: {
		src: ['/node_modules/ionicons/dist/fonts/**/*', '/node_modules/ionic-angular/fonts/**/*'],
		dest: '/assets/fonts'
	  },
	  copyPolyfills: {
		src: ['/node_modules/ionic-angular/polyfills/polyfills.js'],
		dest: ''
	  },
	  copySwToolbox: {
		src: ['/node_modules/sw-toolbox/sw-toolbox.js'],
		dest: ''
	  },
	  copyFontAwesomeCSS: {
		src: '/node_modules/font-awesome/css/font-awesome.min.css',
		dest: '/assets/css/'
	  },
	  copyFontAwesome: {
		src: '/node_modules/font-awesome/fonts/**/*',
		dest: '/assets/fonts/'
	  },
	  copyi18n: {
		src: '/i18n/**/*',
		dest: '/i18n/'
	  }
	};

Como podemos ver no solo se puede utilizar para agregar librerías externas sino también para aquellos elementos que no esten comprendidos en una app de ionic como el Idioma.

6. Incluir en el index.html las dependencias de la librería que estemos agregando.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>ICBanking v2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' *; object-src 'self'; style-src 'self' 'unsafe-inline'; media-src *">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
    
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
  </script>-->

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

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

¡Compártelo!