El proceso de instalación de Ionic es relativamente sencillo:
Instalar node.js
Primero, instale Node.js.Una vez instalado Node, abra el Terminal y ejecute node -v. Este comando le dice a Node que informe de nuevo la versión actualmente instalada:
También debe asegurarse de que npm ( el nodo gestor de paquetes para módulos de node) está actualizado . Cuando instala Node.js esto se hace automáticamente para usted, pero si desea comprobar qué versión de npm se ha instalado ejecute ;
Si necesita actualizar su instalación de npm, el comando es: $ npm install npm -g
Instalación de Git
Con Node y npm instalados correctamente, ahora deberiamos instalaremos Git, pues aunque que usted es libre de elegir cualquier solución de control de versiones (Perforce, SourceSafe o Git), el Ionic CLI aprovecha Git para la gestión de plantillas.
Vaya a https://git-scm.com/download/win para descargar el paquete de windows . Siga adelante y abra el archivo de paquete y siga la instalación predeterminada.
Una vez que la instalación se haya completado, desde el interfaz de comandos :
>git -version
>git versión 2.14.1.vindows-1-1
Instalación de la CLI de Apache Cordova..
Aunque podemos instalar tanto Cordova como Ionic al mismo tiempo, se recomienda instalar cada uno individualmente , de modo qeu en caso de que haya un problema durante el proceso de instalación podamos resolverlo mas facilmente.
La instalación de Cordova CLI utiliza el administrador de paquetes del nodo (npm) para realizar la instalación. Para instalarlo, abra la ventana Terminal o Git Bash e introduzca el siguiente comando:
>npm install -g cordova
Dependiendo de su conexión a Internet, esto puede tomar un tiempo. Una vez finalizado para comprobar como ha quedado puede ejecutar
Siga las guías de plataforma para Android e iOS para instalar las herramientas necesarias para el desarrollo
Instalar Ionic
Al igual que la instalación del CLI de Cordova, el Ionic CLI también se instala a través de npm. En la ventana Terminal, ingrese el siguiente comando:
>npm install -g cordova ionic
Esta instalación tardará un tiempo en completarse. Una vez que la CLI Ionic haya completado su instalación, volveremos a comprobarlo emitiendo el comando ionic en nuestro cmd:
>ionic -v (hay que situarse en el camino d; \ user\ Appdata \ Roaming \ nmp \)
>3.10.3
Ahora tenemos nuestra instalación base en el lugar para el desarrollo iónico. Sin embargo, eventualmente queremos probar nuestras aplicaciones en un emulador de dispositivo o en un dispositivo real. Vamos a echar un vistazo a la instalación de estas herramientas en breve. Pero primero, vamos a configurar una aplicación de ejemplo y ver cómo visualizarla en nuestro navegador.
Desarrolladores de Windows: se recomienda Visual Studio Community , que viene con todo lo que necesita, incluyendo plantillas de inicio
Iniciar una aplicación
La CLI Ionic proporciona un comando sencillo que le permite configurar un proyecto generando una aplicación Ionic básica en el directorio activo. El marco iónic puede scaffold este proyecto vía una colección de plantillas del arrancador. Estos pueden provenir de una plantilla con nombre, un repo GitHub, un código o incluso un directorio local. Las plantillas nombradas están en blanco, sidemenu y pestañas.
Por ahora, ejecute el comando siguiente para crear un proyecto de Ionic:
ionic start myApp tabs
Para proyectos v1, utilice el --type ionic1
.
$ ionic start myApp blank
$ ionic start myApp tabs
$ ionic start myApp sidemenu
Ejecutar su aplicación
myApp ionic serve cd myApp ionic serve
Gran parte de su aplicación se puede construir directamente en el navegador con ionic serve
.Se recomienda comenzar con este flujo de trabajo.
Su panel de control siempre está disponible en dashboard.ionicjs.com
Lista de url 's asociados:
Problemas
Puede que a pesar de haber instalado todas las herramientas necesarias ,al intentar crear un proyecto nuevo nos de error:
D:\user\AppData\Roaming\npm>ionic -v
3.10.1
D:\user\AppData\Roaming\npm>ionic start testApp
? What starter would you like to use: tabs
[INFO] Fetching app base
× Downloading - failed!
Error: connect ETIMEDOUT 192.30.253.113:443
at Object.exports._errnoException (util.js:1024:11)
at exports._exceptionWithHostPort (util.js:1047:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1150:14)
inicio iónico [appName] comando de trabajo detrás de un proxy. Me encontré con el problema al pasar por los pasos de la página Introducción a Ionic .Por alguna razón, el cmd ionic no utiliza la configuración del proxy npm o del proxy git.
Hice esto en una máquina de Windows 7 pero el mismo debe trabajar en otro OS apenas las localizaciones del archivo serán diferentes.
1. Agregue la url proxy a request.js ubicada en 'C: \ Usuarios \ [nombre de usuario] \ AppData \ Roaming \ npm \ node_modules \ ionic \ node_modules \ request \ request.js'.
D:[nombre de usuario]\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js
Aquí está la actualización incluyendo las líneas justo antes y después para que pueda encontrar dónde ponerlo.
// hack to add proxy
self.proxy = 'http://10.68.0.5:8080’;
if (self.proxy) {
if (typeof self.proxy == 'string') self.proxy = url.parse(self.proxy)
// do the HTTP CONNECT dance using koichik/node-tunnel
if (http.globalAgent & self.uri.protocol === "https:") {
var tunnelFn = self.proxy.protocol === "http:"
? tunnel.httpsOverHttp : tunnel.httpsOverHttps
var tunnelOptions = { proxy: { host: self.proxy.hostname
, port: +self.proxy.port
, proxyAuth: self.proxy.auth
, headers: { Host: self.uri.hostname + ':' +
(self.uri.port || self.uri.protocol === 'https:' ? 443 : 80) }}
, rejectUnauthorized: self.rejectUnauthorized
, ca: this.ca }
2. Agregue la URL del proxy a registry.js ubicada en 'C: \ Users \ [nombre de usuario] \ AppData \ Roaming \ npm \ node_modules \ cordova \ node_modules \ plugman \ src \ registry \ registry.js o D:[nombre de usuario]\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\plugman\registry
las líneas alrededor del hack para que pueda encontrar dónde ponerlo.
headers.accept = "application/json"headers["user-agent"] = settings['user-agent'] ||
'node/' + process.version
// hack to add proxy
var p = settings.proxy || 'http://10.68.0.5:8080’
var sp = settings['https-proxy'] || p
opts.proxy = remote.protocol === "https:" ? sp : p