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:

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

>npm -v
>5.4.1

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

>cordova -v
>7.0.1

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:

Componente URL
Node.js nodejs.org
Git git-scm.com
Ionic ionicframework.com
Apache Cordova 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)

 

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.

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

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