Mobile Apps mit Angular und Capacitor erstellen

In diesem Tutorial beginnen wir mit einer neuen 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.

Mit nur wenigen einfachen Schritten können die meisten Angular-Anwendungen in mobile Apps umgewandelt werden.

In diesem Tutorial wird Ihnen der Prozess erklärt, beginnend mit einer neuen Angular-Anwendung und dann die Einbindung von Capacitor zur Umwandlung in native mobile Apps. Sie können auch Capgo Native Navigation, Transitions und tailwind-capacitor für sichere Bereiche verwenden.

Über Capacitor

CapacitorJS ist ein Game-Changer! Sie können es problemlos in jedes Web-Projekt einbinden und es wird Ihre Anwendung in eine native WebView einhüllen, wodurch die native Xcode- und Android Studio-Projekte generiert werden. Zudem bieten seine Plugins Zugriff auf native Gerätefunktionen wie die Kamera über eine JS-Brücke.

Mit Capacitor erhalten Sie eine fantastische native mobile App ohne einen komplizierten Setup oder einen steilen Lernkurve. Sein schlanker API und seine gestreamte Funktionalität machen es zu einem Kinderspiel, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie einfach es ist, eine voll funktionsfähige native App mit Capacitor zu erstellen!

Vorbereitung Ihrer Angular-Anwendung

Um eine neue Angular-Anwendung zu erstellen, führen Sie folgenden Befehl aus:

ng new my-app
cd my-app

Wählen Sie 'Angular' aus, wenn Sie nach der Angular-Version gefragt werden.

Um eine native mobile App zu erstellen, benötigen wir ein Export des Projekts. Daher fügen wir ein einfaches Skript in unserem package.json dazu verwendet werden kann, um das Angular-Projekt zu erstellen und zu kopieren:

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

Nachdem Sie die Kommandozeile ausgeführt haben build, you should be able to spot a fresh dist Ordner in Ihrem Projekt-Root.

Dieser Ordner wird später von Capacitor verwendet, aber für den Moment müssen wir ihn korrekt einrichten.

Hinzufügen von Capacitor zu Ihrer Angular App

To package any web app into a native mobile container, we must follow a few initial steps, but afterward it’s as simple as executing a single sync command.

Erstens können wir das Capacitor CLI as a development dependency, and then set it up within our project. During the setup, you can press “enter” to accept the default values for name and bundle ID.

Nächsten installieren wir das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen.

Schließlich können wir die Plattformen hinzufügen, und Capacitor wird für jede Plattform einen Ordner am Root unseres Projekts erstellen:

# 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

Bis zu diesem Punkt sollten Sie neue ios und android Ordner in Ihrem Angular-Projekt.

Das sind echte native Projekte!

Um auf das Android-Projekt später zuzugreifen, müssen Sie es installieren Das sind echte native Projekte!Um auf das Android-Projekt später zuzugreifen, müssen Sie Xcode.

zusätzlich sollten Sie ein capacitor.config.ts Datei in Ihrem Projekt, die einige grundlegende Capacitor-Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten müssen, ist das webDir, die auf das Ergebnis Ihres Befehls zur Erstellung verweisen muss. Derzeit ist sie jedoch ungenau.

Um dies zu korrigieren, öffnen Sie die capacitor.config.json Datei und aktualisieren Sie die webDir:

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

Sie können es ausprobieren, indem Sie die folgenden Befehle ausführen:

npm run build
npx cap sync

Der erste Befehl npm run build baut einfach Ihr Angular-Projekt und kopiert die statische Build, während der zweite Befehl npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisiert, damit sie in einer App angezeigt werden können.

Zusätzlich kann der Synchronisierungs-Befehl die nativen Plattformen aktualisieren und Plugins installieren, sodass Sie, wenn Sie ein neues Capacitor Plugins wieder ausführen müssen. npx cap sync again.

Oh, Sie haben es gar nicht bemerkt, aber Sie sind jetzt fertig, also sehen Sie das App auf einem Gerät!

Um iOS-Apps zu entwickeln, müssen Sie

Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert und für Android-Apps benötigen Sie Android Studio Wenn Sie neu bei der nativen mobilen Entwicklung sind, können Sie die __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ verwenden, um beide native Projekte leicht zu öffnen:

Wenn Sie mit der nativen mobilen Entwicklung neu sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen.

npx cap open ios
npx cap open android

Sobald Sie Ihre native Projekte eingerichtet haben, ist die Bereitstellung Ihrer App auf einem verbundenen Gerät einfach. In Android Studio müssen Sie nur auf alles warten, bis alles bereit ist, und Ihre App auf einem verbundenen Gerät bereitstellen, ohne dass Sie Einstellungen ändern müssen. Hier ist ein Beispiel:

In Xcode müssen Sie Ihre Signierungsanmeldung einrichten, um Ihre App auf einem realen Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie dies noch nicht getan haben, führt Xcode Sie durch den Prozess (aber wiederum müssen Sie sich im Entwicklerprogramm angemeldet haben). Anschließend können Sie einfach auf

Glückwunsch! Sie haben Ihre Angular-Web-App erfolgreich auf einem mobilen Gerät bereitgestellt. Hier ist ein Beispiel:

Aber warten Sie, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…

Capacitor Live Reload

Bis jetzt sind Sie wahrscheinlich daran gewöhnt, Hot Reload mit allen modernen Frameworks zu haben, und die gute Nachricht ist, dass Sie die gleiche Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen haben können!

Aktivieren Sie den Zugriff auf Ihre lokal gehostete Anwendung mit Live Reload auf Ihrem Netzwerk durch das Laden der Capacitor-App von der spezifischen URL.

Der erste Schritt besteht darin, Ihre lokale IP-Adresse zu ermitteln. Wenn Sie einen Mac verwenden, können Sie dies herausfinden, indem Sie den folgenden Befehl in der Terminal-Anwendung ausführen:

ipconfig getifaddr en0

Bei Windows ausführen:

ipconfig

Dann suchen Sie nach der IPv4-Adresse.

Wir können Capacitor anweisen, die App direkt vom Server zu laden, indem wir eine weitere Eintragung in unserem 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;

Stellen Sie sicher, dass Sie die richtige IP-Adresse und den Port verwenden Ich habe in diesem Beispiel die Standard-Port von Angular verwendet.

Jetzt können wir diese Änderungen anwenden, indem wir sie in unsere native Projekt kopieren:

npx cap copy

Die copy Der Befehl ähnelt sich, syncaber es wird nur kopieren Sie die Änderungen im Web-Ordner ohne Aktualisierung des native Projekts

Sie können Ihre App nun erneut über Android Studio oder Xcode bereitstellen. Nachdem Sie danach Änderungen in Ihrer Angular-Anwendung vorgenommen haben, und zeigt die Änderungen an! und zeigen Sie die Änderungen!

Bleiben Sie dabei Hinweis: Sie sollten die richtige IP-Adresse und den Port in Ihrer Konfiguration verwenden. Der __CAPGO_KEEP_0__-Block oben zeigt die Standard-Port für Angular zum Beispiel an.

Note that you should use the correct IP and port in your configuration. The code block above shows the default Angular port for demonstration purposes.

Verwendung von Capacitor-Erweiterungen

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a fairly simple plugin by running:

npm i @capacitor/share

Es gibt nichts Besonderes an dem Teilen-Plugin, aber es bringt dennoch den native Teilen-Dialog auf! Für dies benötigen wir nun nur noch die Pakete zu importieren und die entsprechende share() Funktion in unserer App aufzurufen, also ändern wir das src/app/app.component.ts zu diesem:

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

Wie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierungsoperation durchführen und die App dann auf unserem Gerät neu bereitstellen. Dazu führen Sie bitte folgende Kommando aus:

npx cap sync

Nachdem Sie auf den Button geklickt haben, können Sie den schönen native Teilen-Dialog in Aktion erleben!

Als nächstes können Sie die App mit Capgo Navigation und Übergängen noch nativer auf iOS und Android anfühlen und gängige iOS-Anzeigeprobleme beheben, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.

Natürlicher Anblick mit Capgo Native Navigation und Übergängen

Jahrelang habe ich mit Ionic Um cross-plattform-Anwendungen zu erstellen, aber die Integration mit Angular ist hackig und selten wertvoll, wenn Sie bereits eine haben Tailwind CSS.

Für einen nativen mobilen Look in einer Angular + Capacitor-Anwendung verwenden Sie stattdessen Capgo-Plugins anstatt web-basierten UI-Kits wie Konsta UI:

• @capgo/capacitor-native-Navigation — nativere Leiste, Liquid Glass-Tasteleiste auf iOS und eine verschwommene Tasteleiste-Style auf Android. Ihre Angular-Router behält die Routenstatus; der Plugin besitzt die native Chrome.
• @capgo/capacitor-Übergänge — Seitenwechseln im Ionic-Stil und iOS-Rück-Button durch Edge-Swipe in der WebView-Schicht, ohne Ionic-UI zu übernehmen.

Installieren Sie beide:

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

Konfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit Web-Inhalt die native Leisten respektiert:

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

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

Rendern Sie eine Liquid Glass-Tasteleiste (iOS verwendet die Systemeigene Rendering; Android verwendet eine verschwommene WebView-Hintergrund):

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

Umgehen Sie die gerouteten Seiten in cap-router-outlet, cap-page, und cap-content, und anrufen setDirection('forward') oder setDirection('back') vor der Navigation. Dupliziere Web-Über- und Fußzeilen nicht, wenn native Navigation diese Oberflächen besitzt.

Siehe die vollständigen Anleitungen: Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergänge.

Die sicheren Bereiche mit Tailwind

Für die Gerätesicheren Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (publikiert als) tailwind-capacitor auf npm). Es bietet safe-areas Tools und andere Capacitor-freundliche Tailwind-Plugins:

bun add -D tailwind-capacitor

In src/styles.css:

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

Verwenden Sie Tools wie pt-safe, pb-safe, und px-safe anstatt von zu streuen env(safe-area-inset-*) von Hand. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre Angular-Konfiguration fehlt, einen PR auf GitHub öffnen.

Wenn Inhalte gekürzt, verschoben oder horizontal scrollbar auf iOS aussehen, fügen Sie mehr

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, fügen Sie mehr overflow-x: hidden oder das Anpassen der Viewport-Tags allein hilft normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.

Fix iOS Layout Issues (Viewport, Safe Area, und Horizontal Overflow)

In src/index.html, setzen Sie die Viewport-Metatag ein <head>:

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

Behandeln Sie den iOS-Safe-Area von einem einzigen Root-Wrapper aus

Erstellen Sie eine einzelne App-Shell und fügen Sie dort den Safe-Area-Padding an — nicht in mehreren verschachtelten Komponenten:

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

Umfasst alle Seite-Inhalte innerhalb von .app-shell. Doppelte Safe-Area-Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die UI oft gekürzt oder zu groß aussehen.

Mit @capgo/tailwind-capacitorkönnen Sie denselben Padding mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf dieser einzelnen Shell.

Setzen Sie Capacitor iOS contentInset auf never first

In capacitor.config.ts, bevorzugt native inset disabled und lasse CSS (oder Native Navigation’s) contentInsetMode: 'css') die sichere Fläche besitzen:

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

Mischen Sie Capacitor’s automatische Inhaltsabstand mit CSS env(safe-area-inset-*) padding ist eine häufige Ursache für doppelten Abstand.

Finden Sie das überlaufende Element

Der übliche Täter ist ein Element, das 100vw, Tailwind w-screen, eine feste Pixelbreite oder eine große min-width.

In Safari Web Inspector, führen Sie aus:

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

Mit Tailwind ersetzen Sie w-screen durch w-full Wenn möglich. Viele horizontalen Überschussprobleme kommen von 100vw / w-screenduplicierter sicheren Bereich-Puffer oder einem festschwellen Container — nicht von der Viewport-Meta-Tags selbst.

Zusammenfassung

Capacitor ist eine hervorragende Option für die Erstellung von nativen Anwendungen auf der Basis eines bestehenden Web-Projekts, die eine einfache Möglichkeit bietet, code zu teilen und eine konsistente Benutzeroberfläche zu erhalten.

Und mit der Hinzufügung von Capgo, ist es sogar einfacher, Live-Updates in Ihrer App hinzuzufügen, um sicherzustellen, dass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Wenn Sie gerne wissen möchten, wie Sie Capgo in Ihrer Angular-Anwendung hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel:

Fortsetzen Sie von Building Mobile Apps with Angular und Capacitor

Wenn Sie Capgo verwenden Building Mobile Apps with Angular und Capacitor um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Mit @capgo/capacitor-live-aktivitäten zur nativen Fähigkeit in Mit @capgo/capacitor-live-aktivitäten, @capgo/capacitor-live-aktivitäten zur Implementierungsdetail in @capgo/capacitor-live-aktivitäten, Mit @capgo/capacitor-video-player zur nativen Fähigkeit in Mit @capgo/capacitor-video-player, @capgo/capacitor-Video-Player zur Implementierungsdetail in @capgo/capacitor-video-player und Mit @capgo/capacitor-native-navigation zur nativen Fähigkeit in Mit @capgo/capacitor-native-navigation.