Instalación de ionic en Windows y posibles fallos por tener conectividad bajo un Proxy


El proceso de instalación de Ionic es relativamente sencillo pues se requiere instalar node.js como paso previo

Despues se requiere instalar Git ( si no lo tiene ya instalado en su equipo)   y acto seguido se debe hacer la instalación de la CLI de Apache Cordova..

Finalmente ya podemos instalar Ionic

Veamos paso a paso como realizar dicha instalación:

1-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:

>node-v
>v8.2.1

También debe asegurarse de que el comando npm está actualizado  ( el nodo gestor de paquetes para módulos de node) .

Cuando instala Node.js esto se hace automáticamente para usted, pero si desea comprobar qué versión de npm se ha instalado  ejecute  el siguiente comando:

>npm -v
>5.4.1

Si necesita actualizar su instalación de npm, el comando es:

$ npm install npm -g

2-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

3-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

>cordova -v
>7.0.1

Siga las guías de plataforma en cordova.apache.org/docs/en/latest/guide/platforms/ tanto para Android e IOS  para instalar las herramientas necesarias para el desarrollo

4-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 la siguiente receta:

 --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 asociadas:

Componente URL
Node.js https://www.nodejs.org/
Git https://git-scm.com/
Ionic https://ionicframework.com/
Apache Cordova https://cordova.apache.org/

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

       (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)

× 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)

Es decir  iónic [appName] esta o detrás de un proxy. Por alguna razón, al ejecutar desde el cmd ionic no puede utilizar la configuración del proxy npm o del proxy git.

Para resolver el problema   puede  intentar seguir los siguientes pasos (según la version de Windows  puede que las localizaciones del archivo sean 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’.

(Por ejemplo el fichero seria  C:[nombre de usuario]\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js

Aquí está la actualización citada incluyendo las líneas justo antes y después para que pueda encontrar dónde ponerlo.

if (self.strictSSL === false) {
self.rejectUnauthorized = false
}

// 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 }

self.agent = tunnelFn(tunnelOptions)
self.tunnel = true
}
}

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

Aquí  vemos 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

// figure out wth 'what' is
if (what) {
if (Buffer.isBuffer(what) || typeof what === "string") {
opts.body = what
headers["content-type"] = "application/json"
headers["content-length"] = Buffer.byteLength(what)
} else {
opts.json = what
}
}
Anuncios