In diesem Tutorial beginnen wir mit einer neuen Angular -Anwendung und wechseln dann in die Welt der nativen mobilen Apps mit Capacitor. Sie können auch Capgo-Native-Navigation und -Übergänge hinzufügen, um eine nativere mobile Erfahrung zu erhalten, und tailwind-capacitor für sichere Bereiche verwenden.
Capacitor ermöglicht es Ihnen, Ihre Angular-Web-Anwendung leicht in eine native mobile App umzuwandeln, ohne dass bedeutende Änderungen oder ein neues Wissen wie React Native erforderlich sind.
With nur wenigen einfachen Schritten können die meisten Angular-Anwendungen in mobile Apps umgewandelt werden.
Dieses Tutorial führt Sie durch den Prozess, beginnend mit einer neuen Angular-Anwendung und dann die Einbindung von Capacitor zur Erschließung des Bereichs nativer mobiler 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 leicht in jede Web-Projekt einbinden und es wird Ihre Anwendung in eine native WebView einhüllen, die native Xcode- und Android Studio-Projekte generiert. Darüber hinaus bieten seine Plugins Zugriff auf native Gerätefeatures 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 leicht es ist, eine voll funktionsfähige native 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. Also lassen Sie uns ein einfaches Skript in unserem package.json dies kann verwendet werden, um ein Angular-Projekt zu erstellen und zu kopieren:
{
"scripts": {
// ...
"build": "ng build --prod"
}
}Nachdem Sie die Kommandozeile ausgeführt haben buildsollten Sie ein neues dist Verzeichnis am Root Ihres Projekts erkennen.
Dieses Verzeichnis wird später von Capacitor verwendet, aber für den Moment müssen wir es korrekt einrichten.
Adding Capacitor to Your Angular App
Um jede Web-App 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 Entwicklungszusammenhang 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.
Das sind echte native Projekte!
Um später auf das Android-Projekt zuzugreifen, müssen Sie Android Studioinstallieren. Für iOS benötigen Sie einen Mac und sollten Xcode.
installieren. Darüber hinaus sollten Sie auch capacitor.Konfiguration.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 der webDir, der auf das Ergebnis Ihres Build-Befehls verweisen muss. Derzeit ist dies fehlerhaft.
Um dies zu korrigieren, öffnen Sie die capacitor.Konfiguration.json -Datei und aktualisieren Sie den webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Sie können dies ausprobieren, indem Sie die folgenden Befehle ausführen:
npm run build
npx cap syncDer erste Befehl npm run build wird einfach Ihr Angular-Projekt bauen und den statischen Build 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 aktualisiert der Synchronisierungs-Befehl die nativen Plattformen und installiert Plugins, sodass Sie, 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 das App auf einem Gerät!
Erstellen und Bereitstellen von nativen Apps
Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert, und für Android-Apps 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 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 androidSobald 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 können Ihre App ohne Änderung der Einstellungen auf ein verbundenes Gerät bereitstellen. Hier ist ein Beispiel:
In Xcode müssen Sie Ihre Signierungsaccount 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 'Play' 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 erfolgreich Ihre Angular-Web-App 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, dass Sie bei allen modernen Frameworks Hot Reload haben, und die gute Nachricht ist, dass Sie auch diese Funktion 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 die Capacitor-App laden, die Inhalte 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 en0Bei 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:
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 verwendenIch habe in diesem Beispiel die Standard-Port von Angular verwendet.
Jetzt können wir diese Änderungen anwenden, indem wir sie in unser natives Projekt kopieren:
npx cap copyDie copy Der Befehl ähnelt sich sync, aber es wird nur Die Änderungen im Web-Ordner und der Konfiguration werden übernommen, ohne das native Projekt zu aktualisieren. Sie können Ihre App noch einmal über Android Studio oder Xcode bereitstellen. Anschließend, wenn Sie in Ihrer Angular-Anwendung etwas ändern,
die App wird automatisch neu geladen und zeigt die Änderungen an! Beachten Sie
dass wenn Sie neue Plugins wie die Kamera installieren, ein Neubuild des native Projekts erforderlich ist. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Fliege erfolgen kann. 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 Demonstrationszweck an.
Mit code-Plugins
Schauen wir uns an, wie man ein Capacitor-Plugin in Aktion verwendet, das wir vorher mehrfach erwähnt haben. Um dies zu tun, können wir ein ziemlich einfaches Plugin installieren, indem wir folgenden Befehl ausführen:
Capacitor
npm i @capacitor/shareThere’s nothing fancy about the Teilen-Plugin, aber es bringt trotzdem den native Teilen-Dialog auf! Für dies benötigen wir nun nur noch die Pakete zu importieren und die entsprechende share() Funktion aus unserer App aufrufen, also ändern wir das src/app/app.component.ts
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'
});
}
}zu diesem:
npx cap syncAs 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:
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.
Als nächstes können Sie die App auf iOS und Android mit Capgo Navigation und Übergängen noch nativer anfühlen lassen und gängige iOS-Anzeigeeinblendungen beheben, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.
Natürliche Benutzeroberfläche mit __CAPGO_KEEP_0__ Native Navigation und Übergängen Ich habe Jahre lang mit To cross-plattform-Anwendungen zu bauen, aber die Integration mit Angular ist hackig und selten wertvoll, wenn Sie bereits haben Tailwind CSS.
Für ein nativem mobilen Gefühl in einer Angular + Capacitor-Anwendung verwenden Sie Capgo-Plugins anstelle von web-only UI-Kits wie Konsta UI:
- @capgo/capacitor-native-Navigation — nativem Navbar, Liquid Glass-Tastenleiste auf iOS und eine verschwommene Tastenleiste-Stil auf Android. Ihre Angular-Router behält die Routenstatus; Der Plugin besitzt die native Chrome.
- @capgo/capacitor-Übergänge — Ionic-Style-Seitenübergänge und iOS-Rückwärts-Schub auf der WebView-Schicht, ohne Ionic-UI zu übernehmen.
Installieren Sie beide:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit das 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-Tastenleiste (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']);
}
}Umfasst die gerouteten Seiten in cap-router-outlet, cap-page, und cap-content, und rufen Sie an setDirection('forward') oder setDirection('back') Bevor Sie navigieren. Duplikate Web-Ober- und -Unterkopf, wenn native Navigation diese Ober- und Unterkopfe besitzt.
Siehe die vollständigen Anleitungen: Verwenden Sie @capgo/capacitor-native-Navigation und Verwenden Sie @capgo/capacitor-Übergänge.
Sichere Bereiche mit Tailwind
Für Gerätesichere Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als tailwind-capacitor veröffentlicht auf npm). Es bietet safe-areas Nutzbarkeiten 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 Nutzbarkeiten 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 aussehen, overflow-x: hidden Hinzufügen oder Anpassen des Viewport-Tags allein löst das Problem normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.
Stellen Sie sicher, dass der Viewport-Meta-Tag korrekt angewendet wird
In src/index.htmlSetze die Viewport-Metatag <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Behandle iOS-Sicherheitsbereich von einem Root-Wrapper nur
Erstelle ein einzelnes App-Shell und füge dort Sicherheitsbereich-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);
}Fasse alle Seiteninhalte in .app-shellDoppelte Sicherheitsbereich-Padding in Kopfzeilen, Modalen und Layout-Wrapper macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen.
Mit @capgo/tailwind-capacitor, kannst du denselben Abstand mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf diesem einzelnen Shell ausdrücken.
Setze Capacitor iOS contentInset auf never erstes
In bevorzugt native Einfügungen deaktivieren und lassen Sie CSS (oder Native Navigation’s) capacitor.config.ts, die sichere Fläche besitzen: contentInsetMode: 'css'Mischen Sie __CAPGO_KEEP_0__’s automatische Inhalts-Einfügung mit 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-*) Finden Sie das überlaufende Element
Der übliche Täter ist ein Element, das
, Tailwind 100vw, eine fixe Pixelbreite oder eine große w-screenIn Safari Web Inspector, ausführen: min-width.
Mit Tailwind ersetzen Sie
[...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,
}));durch w-screen mit w-full wenn möglich. Viele horizontale Überschreitung von Ausgaben kommen von 100vw / w-screen, duplizierte sichere Bereichsabstand oder einem fester Breitencontainer — nicht von der Viewport Meta-Tag selbst.
Zusammenfassung
Capacitor ist eine hervorragende Option für die Erstellung von nativen 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 Einfügung von Capgo, ist es sogar einfacher, live Aktualisierungen in Ihre App hinzuzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.
Wenn Sie gerne erfahren möchten, wie Sie Capgo in Ihre Angular-Anwendung hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel:
Weitermachen Sie von Building Mobile Apps mit Angular und Capacitor
Wenn Sie Building Mobile Apps mit Angular und Capacitor zur Planung nativer Medien- und Schnittstellenverhalten verwenden, 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 Implementierungsdetails 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
