Entorno de desarrollo para Ionic con TypeScript

Objetivo del entorno

Para desarrollar con Ionic y TypeScript necesitas un flujo de trabajo que combine: (1) Node.js para ejecutar herramientas y dependencias, (2) un CLI para crear/servir el proyecto, y (3) un runtime de dispositivo (emulador o teléfono) cuando quieras probar capacidades nativas. En este capítulo montarás un entorno reproducible, crearás una app mínima y verificarás que compila tanto en navegador como en dispositivo/emulador.

Requisitos previos del sistema

• Node.js (LTS) y npm (incluidos con Node).
• Git (recomendado para clonar/gestionar código).
• Editor (por ejemplo, VS Code) para TypeScript.
• Para ejecutar en móvil: Android Studio (Android) y/o Xcode (iOS, solo macOS).

1) Instalación y verificación de Node.js

Instalar Node.js (LTS)

Instala la versión LTS desde el instalador oficial de Node.js. Evita versiones “Current” si buscas estabilidad en dependencias.

Verificar instalación

Abre una terminal nueva y ejecuta:

node -v
npm -v

Si ambos comandos responden con versiones, Node y npm están disponibles en tu PATH.

Problemas comunes y soluciones

2) Instalar herramientas de línea de comandos

Ionic CLI

Instala el CLI globalmente para crear y servir proyectos:

Continúa en nuestra aplicación.

• Escuche el audio con la pantalla apagada.
• Obtenga un certificado al finalizar.
• ¡Más de 5000 cursos para que explores!

O continúa leyendo más abajo...

Descargar la aplicación

npm install -g @ionic/cli

Verifica:

ionic -v

Capacitor (para dispositivo/emulador)

En proyectos modernos, Ionic usa Capacitor para compilar y ejecutar en Android/iOS. Se instala como dependencia del proyecto (no necesariamente global). Aun así, es útil conocer el comando de verificación del entorno:

npx cap --version

Comandos esenciales del CLI (vista rápida)

• ionic start: crea un proyecto.
• ionic serve: ejecuta en navegador con recarga.
• ionic build: compila para producción (web).
• ionic generate: genera páginas/componentes/servicios.
• ionic info: muestra información del entorno.

3) Crear un proyecto Ionic con TypeScript

Crear la app

En una carpeta de trabajo, crea un proyecto. Ejemplo con Angular (TypeScript por defecto):

ionic start mi-app blank --type=angular

Durante el asistente, elige:

• Integración con Capacitor: Yes (recomendado).
• Framework: según el comando (--type).

Entrar al proyecto e instalar dependencias

cd mi-app
npm install

En muchos casos ionic start ya instala dependencias; si no, este paso lo asegura.

Ejecutar en navegador

ionic serve

Esto levanta un servidor local (normalmente en http://localhost:8100) con recarga automática al guardar cambios.

4) Estructura de carpetas y archivos (lo mínimo para orientarte)

La estructura exacta varía según el framework (Angular/React/Vue), pero hay patrones comunes. En un proyecto típico verás:

• package.json: scripts, dependencias y configuración de npm.
• node_modules/: dependencias instaladas (no se edita).
• src/: código fuente de la app (TypeScript, HTML, CSS).
• src/assets/: recursos estáticos (imágenes, íconos).
• src/theme/: variables y estilos globales (según plantilla).
• capacitor.config.ts (o .json): configuración de Capacitor (appId, appName, etc.).
• www/ o salida de build: artefactos web generados por compilación (según scripts).

Archivos clave para TypeScript

• tsconfig.json (y variantes): opciones del compilador TypeScript.
• Archivos .ts en src/: lógica de componentes, servicios y rutas.

5) Ejecutar en dispositivo/emulador con Capacitor

Concepto operativo

Capacitor toma tu app web compilada y la integra en un proyecto nativo (Android/iOS). El flujo típico es: build (web) → sync (copiar al proyecto nativo) → abrir IDE o ejecutar.

Agregar plataforma Android

Primero compila y sincroniza:

ionic build
npx cap add android
npx cap sync android

Luego abre el proyecto en Android Studio:

npx cap open android

Desde Android Studio puedes ejecutar en un emulador o dispositivo conectado.

Agregar plataforma iOS (macOS)

ionic build
npx cap add ios
npx cap sync ios
npx cap open ios

En Xcode selecciona un simulador o dispositivo y ejecuta.

Ejecutar rápido (según configuración)

En algunos proyectos puedes usar:

ionic cap run android -l --external

Esto intenta levantar un servidor de desarrollo y cargarlo en el dispositivo (útil para iterar). Si falla por red, revisa que el dispositivo y el PC estén en la misma red y que el firewall permita conexiones.

6) Verificación del entorno con una app mínima

Comprobar que el proyecto compila

Ejecuta:

npm run build

Si termina sin errores, el toolchain web está correcto.

Crear una pantalla mínima (prueba rápida)

Edita el componente/página principal (según framework) y agrega un texto visible. Por ejemplo, en una plantilla típica, agrega un bloque simple en el HTML de la página inicial:

<p>Entorno OK: Ionic + TypeScript funcionando.</p>

Guarda y confirma en el navegador con ionic serve que el cambio aparece.

Verificar Capacitor

Comprueba que Capacitor detecta plataformas y configuración:

npx cap doctor

Si no está disponible en tu versión, usa:

npx cap ls

y revisa capacitor.config.ts.

7) Errores comunes al crear/ejecutar el proyecto (y cómo resolverlos)

ionic no se reconoce como comando

• Reinstala el CLI: npm i -g @ionic/cli
• Verifica el PATH de npm global. En Windows, a veces requiere reiniciar la terminal o el sistema.

Puerto ocupado al hacer ionic serve

Si el puerto 8100 está en uso:

ionic serve --port 8200

Dependencias inconsistentes o instalación rota

Cuando aparecen errores extraños de dependencias:

rm -rf node_modules package-lock.json
npm install

En Windows (PowerShell):

rmdir /s /q node_modules
del package-lock.json
npm install

Error de versión de Node incompatible

Si el proyecto exige una versión específica, revisa package.json (campo engines) y usa una versión LTS compatible.

Android: no encuentra SDK o falla el build

• Instala Android Studio y el Android SDK.
• Abre Android Studio una vez para completar descargas.
• Verifica variables de entorno (si aplica) y que Gradle pueda descargar dependencias (proxy/red).

iOS: errores de firma o simulador

• Abre el proyecto en Xcode y selecciona un Team (firma).
• Ejecuta en simulador para validar sin dispositivo físico.

Checklist técnico reproducible (compilar y ejecutar)

• Node y npm responden: node -v y npm -v.
• Ionic CLI instalado: ionic -v.
• Proyecto creado: ionic start mi-app blank --type=angular.
• Dependencias instaladas: cd mi-app y npm install.
• Servidor web funciona: ionic serve y la app abre en el navegador.
• Build web correcto: npm run build (sin errores).
• Capacitor disponible: npx cap --version.
• Android (opcional): npx cap add android, npx cap sync android, npx cap open android y ejecutar en emulador/dispositivo.
• iOS (opcional, macOS): npx cap add ios, npx cap sync ios, npx cap open ios y ejecutar en simulador/dispositivo.
• Prueba mínima visible en pantalla (texto agregado) confirmada en navegador y, si aplica, en emulador/dispositivo.