< Angular

Angular - Android alkalmazás

Szerző: Sallai András

Copyright © Sallai András, 2023

Licenc: CC BY-SA 4.0

Web: https://szit.hu

Szükséges

Node.js : https://nodejs.org/en/

Angular CLI: https://angular.io/cli

Mobilfejlesztés beállítása: https://capacitorjs.com/docs/getting-started/environment-setup

Angular alkalmazás létrehozása

ng new app01

cd app01
ng serve

Capacitor

Ha nem vagyunk az alkalmazás gyökérkönyvtárában:

cd app01

Telepítsük a Capacitort:

npm install @capacitor/core
npm install @capacitor/cli

Capacitor konfigurációs fájl készítése

Létre kell hozni a Capacitor konfigurációs állományát:

npx cap init

import { CapacitorConfig } from '@capacitor/cli'; const config: CapacitorConfig = { appId: 'com.example.app', appName: 'app01', webDir: 'dist/app01', bundledWebRuntime: false }; export default config;

appId: A csomagolt alkalmazás egyedi azonosítója.

appName: Az alkalmazás oka.

webDir: A weboldal hova lett lefordítva.

bundledWebRuntime: A Capacitor futtató rész legyen-e másolva.

Ügyeljen arra, hogy a webDir tulajdonság a megfelelő könyvtárra mutasson.

Natív iOS és Android csomagok hozzáadása

Telepítenünk kell az ios vagy android csomagot:

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

Például, az npx cap android parancs az Angular projekthez egy Android projektet ad.

Build

Az ng build paranccsal készítsük el az Angular alkalmazást, az npx cap paranccsal szinkronizáljuk az Angular projektet az Android projekttel.

ng build --prod
npx cap sync

Az npx cap sync parancs a build parancs tartalmát az android/ios könyvtárba másolja.

Android Studio vagy Xcode megnyitás

Megnyithatjuk a projektet Android Studioban vagy Xcode-ban:

npx cap open ios
npx cap open android

Futtatás

Kattintsunk a futtatás gombra.

Linkek

https://betterprogramming.pub/ (2023)