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.

This tutorial will guide you through the process, starting with a new Angular app and then incorporating Capacitor to move into the realm of native mobile apps. You can also use Capgo Native Navigation, Transitions, and tailwind-capacitor for safe areas.

Über Capacitor

CapacitorJS is a game-changer! You can effortlessly incorporate it into any web project, and it will wrap your application into a native webview, generating the native Xcode and Android Studio project for you. Plus, its plugins provide access to native device features like the camera via a JS bridge.

In this tutorial, we’ll begin with a new Capacitor and transition into the native mobile app realm using API. You can also add API Native Navigation and Transitions for a native mobile feel, and use tailwind-Capacitor for safe areas.

Deine Angular App vorbereiten

Um eine neue Angular-Anwendung zu erstellen, führe bitte folgenden Befehl aus:

ng new my-app
cd my-app

Wähle 'Angular' aus, wenn du zur Auswahl des Angular-Versions gefragt wirst.

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

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

Nachdem du den Befehl ausgeführt hast build, you should be able to spot a fresh dist Ordner an deinem Projektroot entdecken.

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

Capacitor in Ihre Angular-Anwendung hinzufügen

Um jede Web-Anwendung in einen nativen mobilen Container zu packen, müssen wir einige erste Schritte befolgen, aber danach ist es so einfach wie die Ausführung eines einzigen sync Kommandos.

Zuerst können wir das Capacitor CLI als Entwicklungspaket installieren und es dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie auf 'Enter' drücken, um die Standardwerte für Namen und Bundle-ID zu akzeptieren.

Als nächstes müssen wir das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen installieren.

Schließlich können wir die Plattformen hinzufügen und Capacitor wird Ordner für jede Plattform 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 Android Studioinstallieren. Für iOS benötigen Sie einen Mac und sollten Xcode.

installieren. Zusätzlich sollten Sie ein capacitor.Konfigurationsdatei file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the webDir, das auf das Ergebnis Ihres Bauskripts verweist. Derzeit ist es ungenau.

To rectify this, open the capacitor.Konfigurationsdatei.json Datei und aktualisieren Sie 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 wird einfach Ihr Angular-Projekt bauen und die statische Ausgabe kopieren, während der zweite Befehl npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisieren wird, damit sie in einer App angezeigt werden können.

Zusätzlich kann der Synchronisierungs-Befehl die nativen Plattformen aktualisieren und Plugins installieren, sodass, wenn Sie ein neues Capacitor-Plugin installieren, ist es Zeit, npx cap sync again.

Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir das App auf einem Gerät!

native apps erstellen und bereitstellen

Um iOS-Anwendungen zu entwickeln, benötigen Sie Xcode installiert, und für Android-Anwendungen benötigen Sie Android Studio installiert. Darüber hinaus müssen Sie, wenn Sie Ihre App im App Store verteilen möchten, sich bei Apple Developer Program für iOS und Google Play Console für Android anmelden.

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

npx cap open ios
npx cap open android

Einmal Ihre native Projekte eingerichtet, 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 Sie können 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 echten 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 bei dem Entwicklerprogramm angemeldet haben). Anschließend können Sie einfach auf 'Laufen' klicken, um die App auf Ihrem verbundenen Gerät auszuführen, das Sie oben auswählen können. Hier ist ein Beispiel:

Herzlichen Glückwunsch! Sie haben Ihre Angular-Webanwendung erfolgreich auf einem Mobilgerät bereitgestellt. Hier ist ein Beispiel:

Aber halt die Sache, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…

Capacitor Live Reload

Mit dieser Funktion kannst du jetzt das gleiche Funktionalität wie bei allen modernen Frameworks haben und das ist eine gute Nachricht! auf einem mobilen Gerät mit minimalen Anstrengungen!

Zugriff auf Ihre lokal gehostete Anwendung mit Live Reload auf Ihrem Netzwerk indem Sie die Capacitor App laden, die Inhalte von der spezifischen URL.

Die erste Schritt ist, herauszufinden, Ihre lokale IP-Adresse. Wenn Sie einen Mac verwenden, können Sie dies herausfinden, indem Sie den folgenden Befehl im Terminal 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 unsere capacitor.config.ts Datei:

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 den richtigen IP- und Port verwenden , ich habe in diesem Beispiel den Standard-Port von Angular verwendet.

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

npx cap copy

Der copy Der Befehl ähnelt sync, aber er 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. Anschließend können Sie, wenn Sie in Ihrer Angular-Anwendung Änderungen vornehmen, Die App wird automatisch neu geladen. und zeigt die Änderungen!

Beachten Sie dass Sie, wenn Sie neue Plugins wie die Kamera installieren, immer noch eine Neuverteilung Ihres nativen Projekts durchführen müssen. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Flugschreibe erfolgen kann.

Hinweis: Verwenden Sie bitte die richtige IP-Adresse und den Port in Ihrer Konfiguration. Der code-Block oben zeigt die Standard-Port für Angular zum Zweck der Demonstration.

Verwendung von Capacitor-Plugins

Schauen wir uns nun an, wie man ein Capacitor-Plugin in Aktion verwendet, das wir bereits mehrfach erwähnt haben. Um dies zu tun, können wir ein ziemlich einfaches Plugin installieren, indem wir folgendes ausführen:

npm i @capacitor/share

Es ist nichts Besonderes an dem Teilen-Plugin, aber es bringt trotzdem den native Teilen-Dialog auf! Für dies benötigen wir nun nur noch das Paket importieren und die entsprechende share() function aus unserem App aufrufen, also ändern wir nun 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'
    });
  }
}

Wenn Sie neue Plugins installieren, müssen Sie eine Synchronisierungsoperation durchführen und die App dann auf Ihrem Gerät neu bereitstellen. Um dies zu tun, führen Sie bitte folgende Befehl aus:

npx cap sync

Nachdem Sie auf den Button geklickt haben, können Sie das schöne native Teilen-Dialog sehen!

Als Nächstes können Sie die App mit Capgo Navigation und Übergängen noch nativer auf iOS und Android machen und häufige iOS-Anzeigefehler beheben, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.

Capgo-fühler UI mit Capgo Native Navigation und Übergängen

Im Laufe der Jahre habe ich mich mit Ionic beschäftigt, um cross-plattformische Anwendungen zu erstellen, aber die Integration mit Angular ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.

haben. Für einen nativen mobilen Look in einer Angular + Capacitor-Anwendung verwenden Sie stattdessen Capgo-Plugins anstelle von web-only UI-Kits wie Konsta UI:

• @capgo/capacitor-native-Navigation — nativer Navbar, Liquid Glass-Tasteleiste auf iOS und eine verschwommene Tasteleiste-Style auf Android. Der Angular-Router hält die Routenstatus; der Plugin besitzt die native Chrome.
• @capgo/capacitor-Übergänge — Seitenübergänge im Ionic-Stil und iOS-Rück-Flug mit der Ecke-Swipe im WebView-Schicht, ohne Ionic-UI zu übernehmen.

Installieren Sie beide:

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

Konfigurieren Sie native Navigation mit CSS-Inset-Modus, damit Webinhalte die native Balken respektieren:

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

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

Rendern Sie eine flüssige Glas-Tasteleiste (iOS verwendet die Systemeigene Rendering; Android verwendet einen verschwommenen 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']);
  }
}

Wrap routed Pages in cap-router-outlet, cap-page, und cap-content, und rufen Sie setDirection('forward') oder setDirection('back') bevor Sie navigieren. Duplizieren Sie Web-Überschriften oder -Fußzeilen nicht, wenn native Navigation diese Oberflächen besitzt.

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

Sichere Bereiche mit Tailwind

Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-@capacitor (publikiert als) tailwind-capacitor auf npm). Es bietet safe-areas utilities 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 Werkzeuge wie pt-safe, pb-safe, and px-safe anstatt von überall zu streuen env(safe-area-inset-*) von Hand. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre Angular-Einrichtung fehlt, Öffnen Sie einen PR auf GitHub.

iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontale Überschreitung)

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, fügen Sie mehr overflow-x: hidden oder das Anpassen der viewport-Tags alleine löst das Problem normalerweise nicht. Arbeiten Sie durch diese Überprüfungen in der Reihenfolge.

Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird.

In src/index.htmlBehandeln Sie iOS-Safe-Area von einem einzigen Root-Wrapper aus <head>:

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

Verwenden Sie das iOS-Safe-Area nur von einem Root-Wrapper aus.

Erstellen Sie eine einzelne App-Shell und fügen Sie dort sicherer Bereich-Puffer hinzu – 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);
}

Alle Inhalt innerhalb der Seite einhüllen .app-shellDoppelte sichere Bereiche in Kopfzeilen, Modalen und Layout-Wrappern machen die Oberfläche oft gekürzt oder zu groß aus.

Mit @capgo/tailwind-capacitor, können Sie das gleiche Padding mit Hilfsmitteln wie pt-safe pb-safe px-safe auf dieser einzelnen Shell.

Setzen Sie Capacitor iOS contentInset auf never erst

In capacitor.config.ts, bevorzugen Sie native inset disabled und lassen Sie CSS (oder Native Navigation’s contentInsetMode: 'css') das sichere Gebiet besitzen:

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

Die Mischung von Capacitor’s automatischem Inhaltseinsatz mit CSS env(safe-area-inset-*) Padding ist eine häufige Ursache für doppelte Abstände.

Finden Sie das echte überlaufende Element

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

In Safari Web Inspector, ausführen:

[...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 mit w-full wenn möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screen, dupliziertem sicheren Bereichsabstand oder einem fixbreiten 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 Zugabe von CapgoEs ist sogar einfacher, Live-Updates in Ihre App zu integrieren, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerkorrekturen haben.

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

Fortsetzen Sie mit Building Mobile Apps with Angular und Capacitor

Wenn Sie __CAPGO_KEEP_0__ verwenden Building Mobile Apps with Angular und Capacitor um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Verwendung von @capgo/capacitor-Live-Aktivitäten für die native Fähigkeit in Using @capgo/capacitor-live-activities @capgo/capacitor-Live-Activities für die Implementierungsdetail in @capgo/capacitor-live-activities Verwendung von @capgo/capacitor-Video-Player für die native Fähigkeit in @capgo/capacitor-Video-Player, @capgo/capacitor-Video-Player für die Implementierungsdetail in @capgo/capacitor-Video-Player, und Mit @capgo/capacitor-native-Navigation für die native Fähigkeit in Mit @capgo/capacitor-native-Navigation.