Créer des applications mobiles avec Angular et Capacitor

Dans ce tutoriel, nous allons commencer avec une nouvelle application Angular et passer dans le monde des applications mobiles natives en utilisant Capacitor. Vous pouvez également ajouter Capgo Native Navigation et Transitions pour un sentiment mobile natif, et utiliser tailwind-capacitor pour les zones de sécurité.

Capacitor vous permet de convertir facilement votre application web Angular en application mobile native sans nécessiter de modifications importantes ou d'apprendre une nouvelle compétence comme React Native.

With just a few simple étapes, most applications Angular can be transformed into mobile apps.

Ce tutoriel vous guidera à travers le processus, en commençant par une nouvelle application Angular et puis en incorporant Capacitor pour entrer dans le domaine des applications mobiles natives. Vous pouvez également utiliser Capgo Navigation Native, Transitions, et tailwind-capacitor pour les zones de sécurité.

À propos de Capacitor

CapacitorJS est un changement de jeu ! Vous pouvez incorporer facilement le dans tout projet web, et il enroulera votre application dans une vue web native, générant le projet Xcode et Android Studio natif pour vous. De plus, ses plugins fournissent accès aux fonctionnalités de dispositif natif comme la caméra via un pont JS.

Avec Capacitor, vous obtenez une fantastique application mobile native sans aucune mise en place compliquée ou courbe d'apprentissage raide. Sa fine API et sa fonctionnalité épurée rendent facile l'intégration dans votre projet. Faites-moi confiance, vous serez émerveillé par la facilité avec laquelle vous pouvez atteindre une application mobile native complètement fonctionnelle avec Capacitor!

Préparation de votre application Angular

Pour créer une nouvelle application Angular, exécutez la commande suivante:

ng new my-app
cd my-app

Sélectionnez « Angular » lorsque vous êtes invité à choisir la version d'Angular.

Pour créer une application mobile native, nous avons besoin d'un export de notre projet. Ainsi, incorporons un script simple dans notre package.json That vous pouvez utiliser pour créer et copier le projet Angular :

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

Après exécution de la commande build, vous devriez pouvoir repérer un dossier frais à la racine de votre projet. dist Ce dossier sera utilisé par __CAPGO_KEEP_0__ plus tard, mais pour l'instant, nous devons le configurer correctement.

Intégrer Capacitor à votre application Angular

Adding Capacitor to Your Angular App

commande. sync Tout d'abord, nous pouvons installer le

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI Ensuite, nous devons installer le package de base et les packages pertinents pour les plateformes iOS et Android.

Commande pour ajouter __CAPGO_KEEP_0__ à votre projet :

Enfin, nous pouvons ajouter les plateformes, et Capacitor créera des dossiers pour chaque plateforme à la racine de notre projet :

# 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

À ce stade, vous devriez pouvoir observer de nouveaux dossiers ios et android dans votre projet Angular.

Ce sont des projets natifs réels !

Pour accéder au projet Android ultérieurement, vous devez installer Android Studio. Pour iOS, vous avez besoin d'un Mac et devriez installer Xcode.

De plus, vous devriez trouver un capacitor.config.ts fichier dans votre projet, contenant certaines configurations fondamentales Capacitor utilisées lors de la synchronisation. La seule chose dont vous devez vous soucier est la webDir, qui doit pointer vers le résultat de votre commande de build. Actuellement, elle est inexacte.

Pour rectifier cela, ouvrez le fichier capacitor.config.json et mettez à jour la webDir:

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

Vous pouvez essayer en exécutant les commandes suivantes :

npm run build
npx cap sync

La première commande npm run build construira simplement votre projet Angular et copiera la build statique, tandis que la deuxième commande npx cap sync synchronisera tous les web code dans les bons endroits des plateformes natives afin qu'ils puissent être affichés dans une application.

De plus, la commande de synchronisation peut mettre à jour les plateformes natives et installer des plugins, donc lorsque vous installez un nouveau Capacitor plugins il est temps de relancer npx cap sync sans vous en rendre compte, vous êtes maintenant effectivement terminé, donc voyons l'application sur un appareil !

Construire et déployer des applications natives

Pour développer des applications iOS, vous devez avoir

Xcode installé, et pour les applications Android, vous devez avoir Android Studio installé. De plus, si vous prévoyez de distribuer votre application sur l'app store, vous devez vous inscrire au programme Apple Developer pour iOS et au Google Play Console pour Android. Si vous êtes nouveau dans le développement mobile natif, vous pouvez utiliser le __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ pour ouvrir facilement les deux projets natifs :

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

Une fois que vous avez configuré vos projets natifs, le déploiement de votre application sur un appareil connecté est facile. Dans Android Studio, vous n'avez qu'à attendre que tout soit prêt, et vous pouvez déployer votre application sur un appareil connecté sans modifier les paramètres. Voici un exemple :

Dans Xcode, vous devez configurer votre compte de signature pour déployer votre application sur un appareil réel au lieu du simulateur. Si vous n'avez pas fait cela avant, Xcode vous guide à travers le processus (mais encore une fois, vous devez être inscrit dans le Programme des développeurs). Par la suite, vous pouvez simplement appuyer sur play pour exécuter l'application sur votre appareil connecté, que vous pouvez sélectionner en haut. Voici un exemple :

Félicitations ! Vous avez réussi à déployer votre application web Angular sur un appareil mobile. Voici un exemple :

Mais attendez, il existe également une méthode plus rapide pour effectuer cela pendant le développement…

Capacitor Live Reload

À ce stade, vous êtes probablement habitué à avoir un redémarrage chaud avec tous les frameworks modernes, et la bonne nouvelle est que vous pouvez avoir la même fonctionnalité sur un appareil mobile avec un minimum d'efforts !

Activer l'accès à votre application hébergée localement avec redémarrage en direct sur votre réseau en faisant charger le contenu par l'application Capacitor à partir de l'URL spécifique.

La première étape consiste à déterminer votre adresse IP locale. Si vous utilisez un Mac, vous pouvez trouver cela en exécutant la commande suivante dans le terminal :

ipconfig getifaddr en0

Ensuite, sur Windows, exécutez :

ipconfig

Recherchez ensuite l'adresse IPv4.

Nous pouvons faire charger Capacitor directement depuis le serveur en ajoutant une autre entrée à notre capacitor.config.ts fichier :

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;

Assurez-vous d'utiliser l'adresse IP et le port correctsJ'ai utilisé le port Angular par défaut dans cet exemple.

Maintenant, nous pouvons appliquer ces modifications en les copiant vers notre projet natif :

npx cap copy

Les copy La commande est similaire à syncmais elle ne mettra à jour que copiez uniquement les modifications apportées au dossier web et la configuration, sans mettre à jour le projet natif.

Vous pouvez maintenant déployer votre application une fois de plus à l'aide d'Android Studio ou Xcode. Après cela, si vous modifiez quelque chose dans votre application Angular, l'application se rechargera automatiquement et affichera les modifications !

Tenez compte que si vous installez de nouveaux plugins comme la caméra, il est encore nécessaire de reconstruire votre projet natif. C'est parce que les fichiers natifs sont modifiés, et cela ne peut pas être fait en temps réel.

Notez que vous devez utiliser l'adresse IP et le port corrects dans votre configuration. Le bloc code ci-dessus montre le port par défaut d'Angular à des fins de démonstration.

Utilisation des plugins Capacitor

Étudions maintenant comment utiliser un plugin Capacitor en action, que nous avons mentionné quelques fois avant. Pour ce faire, nous pouvons installer un plugin relativement simple en exécutant :

npm i @capacitor/share

Il n'y a rien de particulier à ce plugin Partagermais il montre quand même le dialogue de partage natif ! Pour cela, nous n'avons besoin que d'importer le package et d'appeler la fonction correspondante dans notre application, donc changeons donc le share() src/app/app.component.ts dans le suivant : Comme mentionné précédemment, lors de l'installation de nouveaux plugins, nous devons effectuer une opération de synchronisation et puis redéployer l'application sur notre appareil. Pour cela, exécutez la commande suivante :

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'
    });
  }
}

Après avoir cliqué sur le bouton, vous pouvez voir le dialogue de partage natif en action !

npx cap sync

Ensuite, vous pouvez rendre l'application plus native sur iOS et Android avec la navigation et les transitions __CAPGO_KEEP_0__ et corriger les problèmes de mise en page courants d'iOS qui provoquent un débordement horizontal ou des zones de sécurité coupées.

Interface utilisateur ressemblant à celle d'un native avec Capgo Navigation et Transitions Native

Native-feeling UI with Capgo Native Navigation and Transitions

Ionic I’ve worked for years with To construire des applications multiplateformes, mais intégrer Angular est fastidieux et rarement justifié lorsque vous avez déjà Tailwind CSS.

Pour un sentiment mobile natif dans une application Angular + Capacitor , utilisez les Capgo plugins au lieu des kits UI web uniquement comme Konsta UI :

• @capgo/capacitor-native-navigation — barre de navigation native, Liquid Glass barre de tabs sur iOS, et un style de barre de tabs flou sur Android. Votre routeur Angular conserve l'état des routes ; le plugin gère la barre de chrome native.
• @capgo/capacitor-transitions — transitions de page à la manière d'Ionic et un retour arrière par swipe sur l'écran sur iOS, sans adopter la UI d'Ionic.

Installez les deux :

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

Configurez la navigation native avec le mode d'insertion CSS afin que le contenu web respecte les barres natives :

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

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

Rendre une barre de tabs Liquid Glass (iOS utilise la mise en page système ; Android utilise un fond flou 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']);
  }
}

Enveloppez les pages routées dans cap-router-outlet, cap-page, et cap-content, et appelez setDirection('forward') ou setDirection('back') avant de naviguer. N'insérez pas les en-têtes ou les pieds de page natives lorsque la navigation native possède ces surfaces.

Voir les guides complets : Utilisation de @capgo/capacitor-navigation-native et Utilisation de @capgo/capacitor-transitions.

Aires sûres avec Tailwind

Pour les zones sûres des appareils dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié comme tailwind-capacitor sur npm). Il fournit safe-areas outils et autres plugins Tailwind compatibles avec Capacitor :

bun add -D tailwind-capacitor

Dans src/styles.css:

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

Utilisez des outils comme pt-safe, pb-safe, et px-safe au lieu de les ajouter env(safe-area-inset-*) manuellement. Le projet est actuellement développé — si quelque chose manque pour votre configuration Angular, ouvre une PR sur GitHub.

Résoudre les problèmes de mise en page iOS (Vueport, Zone de sécurité, et Débordement horizontal)

Si le contenu semble coupé, décalé ou scrollable horizontalement sur iOS, ajouter plus overflow-x: hidden ou ajuster la balise Vueport seule ne résout généralement pas le problème. Travaille à travers ces vérifications dans l'ordre.

Assurez-vous que la balise meta Vueport est appliquée correctement

Dans src/index.htmlDéfinissez la balise meta de viewport <head>:

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

Gérez l'espace sûr iOS à partir d'un seul wrapper racine

Créez un noyau d'application unique et appliquez la mise en forme de l'espace sûr là, et non dans plusieurs composants imbriqués :

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

Enveloppez tout le contenu de la page à l'intérieur .app-shellLa mise en forme de l'espace sûr dupliquée dans les en-têtes, les modales et les enveloppes de mise en page peut rendre l'interface utilisateur coupée ou trop grande.

Avec @capgo/tailwind-capacitor, vous pouvez exprimer la même mise en forme avec des utilitaires comme pt-safe pb-safe px-safe sur ce seul noyau.

Définissez Capacitor iOS contentInset à never premier

In capacitor.config.ts, préfèrez l'insérer nativement désactivé et laissez CSS (ou la navigation native) gérer la zone de sécurité : contentInsetMode: 'css'Mélanger les __CAPGO_KEEP_0__ automatiques de contenu avec CSS

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) Trouvez l'élément qui déborde vraiment

L'élément coupable est généralement un élément utilisant

, Tailwind 100vw, une largeur fixe en pixels, ou un grand w-screenDans l'inspecteur Web de Safari, exécutez : min-width.

Avec Tailwind, remplacez

[...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,
  }));

par w-screen par w-full When possible, de nombreux problèmes de débordement horizontal proviennent de 100vw / w-screen, de la duplication de la mise en forme de la zone de sécurité, ou d'un conteneur de largeur fixe — et non de la balise meta de la vue portée elle-même.

Conclusion

Capacitor est une excellente option pour créer des applications natives basées sur un projet web existant, offrant une façon simple de partager code et de maintenir une interface utilisateur cohérente.

Et avec l'ajout de Capgo, il est encore plus facile d'ajouter des mises à jour en temps réel à votre application, vous assurant que vos utilisateurs aient toujours accès aux dernières fonctionnalités et corrections de bogues.

Si vous souhaitez apprendre à ajouter Capgo à votre application Angular, consultez l'article suivant :

Continuez à partir de la création d'applications mobiles avec Angular et Capacitor

Si vous utilisez La création d'applications mobiles avec Angular et Capacitor pour planifier le comportement de la média et de l'interface native, connectez-le avec Utiliser @capgo/capacitor-activités-en-vivre pour la capacité native dans Utiliser @capgo/capacitor-activités-en-vivre @capgo/capacitor-activités-en-vivre pour le détail d'implémentation dans @capgo/capacitor-activités-en-vivre, Utiliser @capgo/capacitor-joueur-de-videos pour la capacité native dans Utiliser @capgo/capacitor-joueur-de-videos, @capgo/capacitor-joueur-de-videos pour le détail d'implémentation dans @capgo/capacitor-joueur-de-videos, et Utiliser @capgo/capacitor-navigation-native pour la capacité native dans Utiliser @capgo/capacitor-navigation-native.