Crear aplicaciones móviles con Angular y Capacitor

In este tutorial, comenzaremos con una nueva Angular app and transition into the native mobile app realm using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

Capacitor allows you to easily convert your Angular web application into a native mobile app without requiring significant modifications or learning a new skill like React Native.

Con solo unos pocos pasos simples, la mayoría de las aplicaciones de Angular pueden ser transformadas en aplicaciones móviles.

Este tutorial te guiará a través del proceso, comenzando con una nueva aplicación de Angular y luego incorporando Capacitor para moverse al reino de aplicaciones móviles nativas. También puedes utilizar Capgo de navegación nativa, transiciones y tailwind-capacitor para áreas seguras.

Sobre Capacitor

__CAPGO_KEEP_0__ es un juego cambiador. Puedes incorporarlo fácilmente en cualquier proyecto web, y lo envolverá en una vista web nativa, generando el proyecto Xcode y Android Studio nativo para ti. Además, sus plugins te proporcionan acceso a características de dispositivos nativos como la cámara a través de un puente JS.

Con Capacitor, obtienes una fantástica aplicación móvil nativa sin ninguna configuración complicada o curva de aprendizaje empinada. Su API y funcionalidad escalonada lo hacen un placer integrarlo en tu proyecto. Confía en mí, te sorprenderá la facilidad con la que puedes lograr una aplicación nativa completamente funcional con Capacitor!

Preparando tu aplicación de Angular

Para crear una nueva aplicación de Angular, ejecuta el siguiente comando:

ng new my-app
cd my-app

Elige "Angular" cuando se te pregunte por la versión de Angular.

Para crear una aplicación móvil nativa, necesitamos un export de nuestro proyecto. Así que incluyamos un script sencillo en nuestro package.json que podremos utilizar para construir y copiar la aplicación de Angular:

{
  "scripts": {
    // ...
    "build": "ng build --prod"
  }
}

After ejecutar la orden buildpuedes reconocer una aplicación móvil recién creada dist carpeta en la raíz de tu proyecto.

Esta carpeta se utilizará por Capacitor más adelante, pero por ahora debemos configurarla correctamente.

Agregar Capacitor a tu aplicación de Angular

Para empaquetar cualquier aplicación web en un contenedor móvil nativo, debemos seguir unos pocos pasos inicialmente, pero después es tan simple como ejecutar una sola sync orden.

Primero, podemos instalar el Capacitor CLI como una dependencia de desarrollo, y luego configurarlo dentro de nuestro proyecto. Durante la configuración, puedes presionar ‘enter’ para aceptar los valores predeterminados para el nombre y el ID de la aplicación.

En segundo lugar, debemos instalar el paquete principal y los paquetes relevantes para las plataformas iOS y Android.

Finalmente, podemos agregar las plataformas, y Capacitor creará carpetas para cada plataforma en la raíz de nuestro proyecto:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Angular project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

Por este punto, deberías poder observar nuevos ios y android carpetas en tu proyecto de Angular.

Son proyectos nativos reales!

Para acceder al proyecto de Android más tarde, debes instalar Android Studio. Para iOS, necesitas un Mac y debes instalar Xcode.

Además, debes encontrar un capacitor.config.ts archivo en tu proyecto, que contiene algunas configuraciones fundamentales Capacitor utilizadas durante la sincronización. La única cosa a la que debes prestar atención es el webDirque debe apuntar al resultado de tu comando de compilación. Actualmente, es inexacto.

Para corregir esto, abre el capacitor.config.json archivo y actualiza el webDir:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

Puedes probarlo ejecutando los siguientes comandos:

npm run build
npx cap sync

El primer comando npm run build simplemente compilará tu proyecto Angular y copiará la compilación estática, mientras que el segundo comando npx cap sync sincronizará todos los web code en los lugares adecuados de las plataformas nativas para que puedan ser visualizados en una aplicación.

Además, el comando de sincronización puede actualizar las plataformas nativas e instalar plugins, por lo que cuando instales un nuevo plugins de Capacitor es hora de correr npx cap sync de nuevo.

¡Sin darte cuenta, ya estás listo, así que veamos la aplicación en un dispositivo!

Crear y Desplegar aplicaciones nativas

Para desarrollar aplicaciones iOS, necesitas tener Xcode instalado, y para aplicaciones Android, necesitas tener Android Studio instalado. Además, si planeas distribuir tu aplicación en la tienda de aplicaciones, debes inscribirte en el Programa de Desarrolladores de Apple para iOS y en el Console de Google Play para Android.

Si eres nuevo en el desarrollo de aplicaciones móviles nativas, puedes utilizar los Capacitor CLI para abrir fácilmente ambos proyectos nativos:

npx cap open ios
npx cap open android

Una vez que hayas configurado tus proyectos nativos, desplegar tu aplicación en un dispositivo conectado es fácil. En Android Studio, solo necesitas esperar a que todo esté listo, y puedes desplegar tu aplicación en un dispositivo conectado sin cambiar ninguna configuración. Aquí tienes un ejemplo:

En Xcode, debes configurar tu cuenta de firma para desplegar tu aplicación en un dispositivo real en lugar de solo en el simulador. Si no lo has hecho antes, Xcode te guía a través del proceso (pero de nuevo, debes estar inscrito en el Programa de Desarrolladores). Posteriormente, puedes simplemente pulsar play para ejecutar la aplicación en tu dispositivo conectado, que puedes seleccionar en la parte superior. Aquí tienes un ejemplo:

¡Felicidades! Has desplegado con éxito tu aplicación web de Angular en un dispositivo móvil. Aquí tienes un ejemplo:

Pero espera, hay una forma más rápida de hacer esto durante el desarrollo…

Capacitor Recarga en vivo

Por ahora, probablemente estás acostumbrado a tener la recarga caliente con todas las marcos modernas, y la buena noticia es que puedes tener la misma funcionalidad en un dispositivo móvil con un mínimo esfuerzo!

Habilita el acceso a tu aplicación alojada localmente con recarga en vivo on your network por tener la aplicación Capacitor cargar el contenido desde la URL específica.

El primer paso es determinar la dirección IP local. Si está utilizando un Mac, puede encontrar esto ejecutando el siguiente comando en la terminal:

ipconfig getifaddr en0

On Windows, ejecuta :

ipconfig

Luego busque la dirección IPv4.

Puedemos instruir a Capacitor para cargar la aplicación directamente desde el servidor agregando otra entrada a nuestro archivo: capacitor.config.ts file:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:4200',
    cleartext: true
  }
};

export default config;

la dirección IP y el puerto correctos la dirección IP y el puerto correctoAhora, podemos aplicar estos cambios copiándolos a nuestro proyecto nativo:

Ahora podemos aplicar estos cambios copiándolos a nuestro proyecto nativo.

npx cap copy

The copy El comando es similar a sync, but it will only copiar los cambios realizados en la carpeta web y la configuración, sin actualizar el proyecto nativo.

Puedes desplegar tu aplicación una vez más a través de Android Studio o Xcode. Después de eso, si cambias algo en tu aplicación de Angular, la aplicación se recargará automáticamente y mostrará los cambios!

Tener en cuenta que si instales nuevos plugins como la cámara, todavía requiere una reconstrucción de tu proyecto nativo. Esto se debe a que los archivos nativos se han cambiado, y no se puede hacer en tiempo real.

Nota que debes utilizar la IP y el puerto correctos en tu configuración. El bloque code anterior muestra el puerto de Angular por defecto para fines de demostración.

Usando Capacitor Plugins

Vamos a ver cómo utilizar un plugin Capacitor en acción, que mencionamos antes. Para hacer esto, podemos instalar un plugin bastante simple ejecutando:

npm i @capacitor/share

No hay nada especial en el Compartir pluginPero de todas formas, abre el diálogo de compartir nativo. Para esto, ahora solo necesitamos importar el paquete y llamar al método correspondiente. share() función de nuestra aplicación, así que cambiémosla src/app/app.component.ts hasta este punto

import { Component } from '@angular/core';
import { Share } from '@capacitor/share';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';

  async share() {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  }
}

As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the following command:

npx cap sync

Después de pulsar el botón, puedes ver en acción el hermoso diálogo de compartir nativo.

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Interfaz de usuario con un sentimiento nativo con Capgo Navegación y Transiciones nativas

He trabajado durante años con plugins para construir aplicaciones de múltiples plataformas, pero integrarlo con Angular es engorroso y raramente vale la pena cuando ya tienes Tailwind CSS.

Para un sentir móvil nativo en una aplicación Angular + Capacitor, utilice plugins Capgo en lugar de kits de interfaz de usuario web solo como Konsta UI:

• @capgo/capacitor-navegación-nativa — barra de navegación nativa, Liquid Glass de barra de pestañas en iOS, y un estilo de barra de pestañas difuminado en Android. Su router de Angular mantiene el estado de ruta; el plugin posee el navegador nativo.
• @capgo/capacitor-transiciones Transiciones de página estilo Ionic y retroceso por swipe en iOS en la capa WebView, sin adoptar la interfaz de usuario de Ionic.

Instale ambos:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Configure la navegación nativa con el modo de inserción CSS para que el contenido web respete las barras nativas:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Render un tablero de Liquid Glass (iOS utiliza la renderización propia del sistema; Android utiliza un fondo degradado de WebView):

import { inject } from '@angular/core';
import { Router } from '@angular/router';

const router = inject(Router);

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.navigate([`/${id}`]);
});

Add native page transitions in your app shell:

```typescript
// app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions';

initTransitions({ platform: 'auto' });

@Component({
  selector: 'app-root',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <cap-router-outlet #outlet platform="auto" swipe-gesture="auto">
      <router-outlet></router-outlet>
    </cap-router-outlet>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('outlet') outlet?: ElementRef<HTMLElement>;

  constructor(private router: Router) {}

  ngAfterViewInit() {
    if (this.outlet?.nativeElement) {
      setupRouterOutlet(this.outlet.nativeElement, { platform: 'auto', swipeGesture: 'auto' });
    }
  }

  openSettings() {
    setDirection('forward');
    this.router.navigate(['/settings']);
  }
}

Envuelva las páginas de ruta en cap-router-outlet, cap-pagey cap-contenty llame setDirection('forward') o setDirection('back') antes de navegar. No duplique encabezados o pie de página web cuando la navegación nativa controla esas superficies.

Vea las guías completas: Usando @capgo/capacitor-navegación-nativa y Usando @capgo/capacitor-transiciones.

Áreas seguras con Tailwind

Para áreas seguras de dispositivos en Tailwind CSS, utilice @capgo/tailwind-capacitor (publicado como tailwind-capacitor en npm). Proporciona safe-areas utilidades y otros plugins de Tailwind amigables con Capacitor:

bun add -D tailwind-capacitor

Inicio src/styles.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Utilice herramientas como pt-safe, pb-safe, y px-safe en lugar de agregarlos env(safe-area-inset-*) manualmente. El proyecto está activamente desarrollado — si algo falta para su configuración de Angular, abrir una solicitud de revisión en GitHub.

Solucionar problemas de diseño de iOS (Viewport, Área Segura y Desbordamiento Horizontal)

Si el contenido parece recortado, desplazado o desplazable horizontalmente en iOS, agregar más overflow-x: hidden o ajustar la etiqueta de viewport sola no suele solucionarlo. Pase por estos controles en orden.

Asegúrese de que la etiqueta meta de viewport se aplique correctamente

Inicio src/index.html, establezca la etiqueta meta de viewport en <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Administrar el área seguro de iOS desde un solo envoltorio de raíz

Crear una caja de aplicación única y aplicar allí el relleno de área segura — no en múltiples componentes anidados:

html,
body,
app-root {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Wrap all page content inside __CAPGO_KEEP_0__. .app-shellEl uso duplicado de la zona segura en encabezados, modales y wrappers de layout hace que la interfaz de usuario parezca recortada o demasiado grande.

Con @capgo/tailwind-capacitorpuedes expresar el mismo relleno con utilidades como pt-safe pb-safe px-safe en esa caja única.

Establecer Capacitor iOS contentInset en never primero

En capacitor.config.ts, prefiera el diseño nativo deshabilitado y deja que CSS (o la navegación nativa) contentInsetMode: 'css'Propietario de la zona segura:

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'www',
  ios: {
    contentInset: 'never',
  },
};

Mezclar el diseño de contenido automático de Capacitor con CSS env(safe-area-inset-*) es una causa común de espaciado doble.

Encuentre el elemento que desborda realmente

El culpable usual es un elemento que utiliza 100vw, Tailwind w-screen, un ancho de píxeles fijo, o un tamaño min-width.

En Safari Web Inspector, ejecuta:

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Con Tailwind, reemplaza w-screen con w-full cuando sea posible. Muchos problemas de desbordamiento horizontal provienen de 100vw / w-screenNo se debe duplicar el relleno de área segura, ni utilizar un contenedor de ancho fijo — no desde la etiqueta meta de viewport en sí misma.

Conclusion

Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.

Con la adición de Capgo, es aún más fácil agregar actualizaciones en vivo a tu aplicación, asegurando que tus usuarios siempre tengan acceso a las últimas características y correcciones de errores.

Si desea aprender a agregar Capgo a su aplicación Angular, consulte el siguiente artículo.

Sigue adelante desde la creación de aplicaciones móviles con Angular y Capacitor

Building Mobile Apps with Angular y __CAPGO_KEEP_0__ Desarrollar Aplicaciones Móviles con Angular y Capacitor planear el comportamiento de medios y interfaz nativa, conectarla con Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo, @capgo/capacitor-actividades-en-vivo para el detalle de implementación en @capgo/capacitor-actividades-en-vivo, Usando @capgo/capacitor-reproductor-de-videos para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-videos, @capgo/capacitor-reproductor-de-videos para el detalle de implementación en @capgo/capacitor-reproductor-de-videos, y Usando @capgo/capacitor-navegación-nativa para la capacidad nativa en Usando @capgo/capacitor-navegación-nativa.