In diesem Tutorial beginnen wir mit einer neuen Angular Anwendung und wechseln in den Bereich nativer Mobilanwendungen mit Capacitor. Sie können auch Capgo Native Navigation und Transitions hinzufügen, um ein nativ anmutendes Mobilgerühl zu erhalten, und tailwind-capacitor für sichere Bereiche verwenden.
Capacitor ermöglicht Ihnen, Ihre Angular-Webanwendung leicht in eine nativere Mobilanwendung umzuwandeln, ohne dass signifikante Änderungen oder ein neues Wissen wie React Native erforderlich sind.
Mit nur wenigen einfachen Schritten können die meisten Angular-Anwendungen in Mobilanwendungen umgewandelt werden.
Dieses Tutorial führt Sie durch den Prozess, beginnend mit einer neuen Angular-Anwendung und dann die Einbindung von Capacitor zur Einführung in den Bereich nativer Mobilanwendungen. 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 leicht in jede Web-Projekt einbetten und es wird Ihre Anwendung in eine native WebView einhüllen, sodass die native Xcode- und Android-Studio-Projekte generiert werden. Zudem bieten seine Plugins Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke.
Mit Capacitor erhalten Sie eine fantastische nativere Mobilanwendung ohne einen komplizierten Setup oder einen steilen Lernkurve. Seine schlanken API und gestreamten Funktionalitäten machen es ein Leichtes, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie leicht es ist, eine voll funktionsfähige nativere App mit Capacitor zu erreichen.
Vorbereitung Ihrer Angular-Anwendung
Um eine neue Angular-Anwendung zu erstellen, führen Sie den folgenden Befehl aus:
ng new my-app
cd my-appWä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 lassen wir ein einfaches Skript in unserem package.json ein, das zum Bauen und Kopieren des Angular-Projekts verwendet werden kann:
{
"scripts": {
// ...
"build": "ng build --prod"
}
}Nachdem Sie den Befehl buildausgeführt haben, sollten Sie ein frisches dist Ordner an Ihrem Projekts Wurzel sehen.
Dieser Ordner wird später von Capacitor verwendet, aber für den Moment müssen wir ihn korrekt einrichten.
Adding Capacitor to Your Angular App
Um jede Web-App in einen native mobilen Container zu packen, müssen wir einige erste Schritte befolgen, aber danach ist es so einfach wie die Ausführung eines einzigen sync Befehl.
Zunächst können wir das Capacitor CLI als Entwicklungspaket installieren und 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 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 androidBis zu diesem Punkt sollten Sie neue ios und android Ordner in Ihrem Angular-Projekt beobachten können.
Diese sind echte native Projekte!
To haben Sie später Zugriff auf das Android-Projekt, müssen Sie Android Studio installieren. Für iOS benötigen Sie einen Mac und sollten Xcode.
installieren. Darüber hinaus sollten Sie ein capacitor.config.ts 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 __CAPGO_KEEP_0__-Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist der
webDir capacitor.config.json To korrigieren, öffnen Sie das 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 syncDer erste Befehl npm run build wird einfach Ihr Angular-Projekt erstellen und die statische Build-Kopie anlegen, während der zweite Befehl npx cap sync alle Web code in die richtigen Orte der native Plattformen synchronisieren wird, damit sie in einer App angezeigt werden können.
Zusätzlich kann der Synchronisierungs-Befehl die native Plattformen aktualisieren und Plugins installieren, sodass, wenn Sie ein neues Capacitor-Plugin installieren es Zeit ist, npx cap sync wieder zu laufen.
Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir mal die App auf einem Gerät!
Natives Apps entwickeln und bereitstellen
Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert und für Android-Apps benötigen Sie Android Studio installiert zu haben. Darüber hinaus müssen Sie, wenn Sie Ihre App im App-Store verteilen möchten, sich für iOS im Apple Developer Program und für Android im Google Play Console anmelden.
Wenn Sie neu bei der nativen mobilen Entwicklung sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:
npx cap open ios
npx cap open androidEinmal haben Sie Ihre native Projekte eingerichtet, ist das Bereitstellen 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 Ihren Signierungsaccount einrichten, um Ihre App auf einem realen Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie das noch nicht gemacht haben, führt Xcode Sie durch den Prozess (aber wiederum müssen Sie sich im Developer Program angemeldet haben). Anschließend können Sie einfach auf
xcode-run
angular-mobile-app
Capacitor Live Reload
Sie sind wahrscheinlich bereits an heißer Neuladung mit allen modernen Frameworks gewöhnt 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-Neuladung auf Ihrem Netzwerk indem Sie die Capacitor-App laden, die den Inhalt von der spezifischen URL bezieht.
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 im Terminal ausführen:
ipconfig getifaddr en0Auf Windows ausführen:
ipconfigDann suchen Sie nach der IPv4-Adresse.
Wir können Capacitor anweisen, die App direkt vom Server zu laden, indem wir eine weitere Eintragung in unser capacitor.config.ts Datei hinzufügen:
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;Sicherstellen Sie, dass Sie den richtigen IP- und Port verwenden, Ich habe in diesem Beispiel die Standard-Port von Angular verwendet.
Jetzt können wir diese Änderungen übernehmen, indem wir sie in unser natives Projekt übernehmen:
npx cap copyDer copy Befehl ähnelt sich sync, aber er wird nur die Änderungen im Web-Ordner und die Konfiguration übernehmen, ohne das natives Projekt zu aktualisieren.
Sie können Ihr App nun noch einmal über Android Studio oder Xcode bereitstellen. Anschließend, wenn Sie etwas in Ihrer Angular App ändern wird die App automatisch neu geladen und zeigt die Änderungen an!
Achten Sie darauf dass Sie bei der Installation neuer Plugins wie z.B. der Kamera, noch eine Neuverteilung Ihres native Projekts durchführen müssen. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Fliege 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 Demonstrationszweck an.
Mit Capacitor-Plugins
Lassen Sie uns nun einen Capacitor-Plugin in Aktion betrachten, von dem wir bereits mehrfach gesprochen haben. Um dies zu tun, können wir ein ziemlich einfaches Plugin installieren, indem wir Folgendes ausführen:
npm i @capacitor/shareEs ist nichts Besonderes an dem Share-Pluginaber es öffnet trotzdem den native Share Dialog! Dazu müssen wir nun nur noch das Paket importieren und die entsprechende share() Funktion in unserem App aufrufen, also ändern wir das src/app/app.component.ts in folgende Weise:
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 Synchronisationsoperation durchführen und das App dann auf unserem Gerät neu deployen. Um dies zu tun, führen Sie bitte Folgendes aus:
npx cap syncNachdem Sie auf den Button geklickt haben, können Sie das schöne native Teilen-Dialog sehen!
Als Nächstes können Sie die App auf iOS und Android mit Capgo Navigation und Übergängen noch nativer machen und häufige iOS-Anordnungsprobleme lösen, die zu horizontaler Überfluss oder gekürzten sicheren Bereichen führen.
Natürlicher Anwendungsdesign mit Capgo Native Navigation und Übergängen
Ich habe in den letzten Jahren mit Ionic Kreuzplattformanwendungen erstellt, aber die Integration mit Angular ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.
For a native mobile feel in an Angular + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:
- Für einen nativen mobilen Look in einer Angular + capgo Anwendung verwenden Sie stattdessen capacitor-Plugins anstelle von web-only-UI-Kits wie Konsta UI: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation
- @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions
Install beide:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurieren Sie die 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 Liquid Glass-Tasteleiste (iOS verwendet die Systemeigene Renderei; Android verwendet einen verschleierter 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']);
}
}Umgeroutete Seiten in cap-router-outlet, cap-pageund cap-contentund aufrufen setDirection('forward') oder setDirection('back') bevor Sie navigieren. Duplizieren Sie Web-Über- oder -Füße nicht, wenn die native Navigation diese Oberflächen besitzt.
Sehen Sie sich die vollständigen Anleitungen an: Mit @capgo/capacitor-native-navigation und Mit @capgo/capacitor-transitions.
Sichere Bereiche mit Tailwind
Für Gerätesicherheitsbereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als tailwind-capacitor auf npm). Es bietet safe-areas Nützlichkeiten und andere Capacitor-freundliche Tailwind-Plugins:
bun add -D tailwind-capacitorIn src/styles.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Verwenden Sie Nützlichkeiten wie pt-safe, pb-safe, und px-safe anstatt sie env(safe-area-inset-*) manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre Angular-Konfiguration fehlt, öffnen Sie ein PR auf GitHub.
iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontale Überschreitung)
Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar erscheinen, hilft das Hinzufügen oder Anpassen des Viewport-Tags normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Stellen Sie sicher, dass der Viewport-Meta-Tag korrekt angewendet wird
In
, setzen Sie den Viewport-Meta-Tag in src/index.htmlBehandeln Sie das iOS-Safe-Area von einem einzigen Root-Wrapper aus <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Erstellen Sie ein einzelnes App-Shell und fügen Sie dort Safe-Area-Padding hinzu – nicht in mehreren verschachtelten Komponenten:
Wrapen Sie alle Seiteninhalte innerhalb von
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);
}Doppelte Safe-Area-Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aus. .app-shellMit
@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor, Sie können denselben Abstand auch mit Hilfsfunktionen ausdrücken pt-safe pb-safe px-safe auf dieser einzelnen Konsole.
Setzen Sie Capacitor iOS contentInset auf never erst
In capacitor.config.ts, bevorzugen Sie native inset deaktiviert und lassen Sie CSS (oder Native Navigation’s) contentInsetMode: 'css') den sicheren Bereich besetzen:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'www',
ios: {
contentInset: 'never',
},
};Die Kombination von Capacitor’s automatischem Inhaltseinsatz mit CSS env(safe-area-inset-*) Abstand ist eine häufige Ursache für doppelten Abstand.
Finden Sie das überlaufende Element
Die übliche Schuldige ist ein Element, das 100vwTailwind w-screen, eine feste Pixelbreite oder eine große min-width.
Im 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 einer feste-Breiten-Container — nicht von der Viewport-Meta-Tags selbst.
Fazit
Capacitor ist eine hervorragende Option für die Erstellung nativer Anwendungen auf der Grundlage 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 Capgoist es sogar einfacher, live Aktualisierungen in Ihre App hinzuzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.
If Sie möchten wissen, wie Sie Capgo in Ihrer Angular-Anwendung hinzufügen können, lesen Sie bitte den nächsten Artikel:
Fortsetzen Sie mit Building Mobile Apps mit Angular und Capacitor
Wenn Sie native Medien- und Schnittstellenverhalten planen, verbinden Sie es mit Building Mobile Apps mit Angular und Capacitor um native Medien- und Schnittstellenverhalten zu planen, verbinden Sie es mit Mit @capgo/capacitor-live-aktivitäten Für die native Fähigkeit in Mit @capgo/capacitor-live-aktivitäten @capgo/capacitor-live-aktivitäten Für die Implementierungsdetail in @capgo/capacitor-live-aktivitäten Mit @capgo/capacitor-video-player Für die native Fähigkeit in Mit @capgo/capacitor-video-player @capgo/capacitor-video-player für die Implementierungsdetails in @capgo/capacitor-video-player und Mit @capgo/capacitor-native-navigation für die native Fähigkeit in Mit @capgo/capacitor-native-navigation.
