Install Capacitor.
Add Capacitor to your project using the ng-app schematic
ng add @capacitor/angular
Angular & Capacitor
Build native mobile apps with web technology and Angular
Build the Web App.
The compiled web assets will be copied into each Capacitor native platform during the next step.
ng build --prodInstall the native platforms you want to target.
Capacitor's native projects exist in their own top-level folders and should be considered part of your app (check them into source control).
npm i @capacitor/ios @capacitor/android
npx cap add android
npx cap add iosAdding calls to Native APIs
With Capacitor installed, adding calls to native device features is as straight forward as calling other JavaScript methods
import { Component } from '@angular/core';
import { Geolocation, GeolocationPosition } from '@capacitor/geolocation';
@Component({
selector: 'app-geo-page',
templateUrl: 'geo.page.html',
styleUrls: ['geo.page.scss'],
})
export class GeolocationPage {
loc: GeolocationPosition;
constructor() {}
async getCurrentPosition() {
this.loc = await Geolocation.getCurrentPosition();
}
}Continue your Capacitor Journey.
This is only the beginning. Learn more about the Capacitor development workflow or using more native APIs .