Angular | Starting with Capacitor
Introduction
Install Angular
$ npm -g install @angular/cli
Create sample app
❯ ng new app-capacitor ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss] ❯ cd app-capacitor
Change output path to capacitor defaults
Change line in angular.json
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
Add capacitor support
❯ ng add @capacitor/angular ℹ Using package manager: npm ✖ Unable to find compatible package. Using 'latest'. ✖ Package has unmet peer dependencies. Adding the package may not succeed. The package @capacitor/angular will be installed and executed. Would you like to proceed? Yes
Capacitor initialisieren
❯ npx cap init
[?] What is the name of your app?
This should be a human-friendly app name, like what you'd see in the App Store.
√ Name ... app-capacitor
[?] What should be the Package ID for your app?
Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique identifiers for apps. They must be in
reverse domain name notation, generally representing a domain name that you or your company owns.
√ Package ID ... com.example.app
√ Creating capacitor.config.ts in D:\CLOUD\Online-Seminare\Kurse\Angular\Einsteiger\App_Capacitor in 5.31ms
[success] capacitor.config.ts created!
Next steps:
https://capacitorjs.com/docs/v3/getting-started#where-to-go-next
[?] Join the Ionic Community! 💙
Connect with millions of developers on the Ionic Forum and get access to live events, news updates, and more.
√ Create free Ionic account? ... no
[?] Would you like to help improve Capacitor by sharing anonymous usage data? 💖
Read more about what is being collected and why here: https://capacitorjs.com/telemetry. You can change your mind at
any time by using the npx cap telemetry command.
√ Share anonymous usage data? ... noBuild your app
We will need the dist directory with the web files
❯ ng build --prod
Option "--prod" is deprecated: No need to use this option as this builder defaults to configuration "production".
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
Initial Chunk Files | Names | Size
main.b633c9096acdb457c421.js | main | 212.34 kB
polyfills.e4574352eda6eb439793.js | polyfills | 35.95 kB
runtime.d66bb6fe709ae891f100.js | runtime | 1.01 kB
styles.31d6cfe0d16ae931b73c.css | styles | 0 bytes
| Initial Total | 249.29 kB
Build at: 2021-05-28T09:32:28.905Z - Hash: ed2ed2d661b0d58b48f2 - Time: 28225ms❯ npm install @capacitor/ios @capacitor/android
npm WARN @capacitor/angular@1.0.3 requires a peer of rxjs@~6.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN @capacitor/angular@1.0.3 requires a peer of typescript@~3.4.3 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @capacitor/ios@3.0.0
+ @capacitor/android@3.0.0
added 2 packages from 1 contributor, removed 1 package and audited 1375 packages in 7.385s
88 packages are looking for funding
run `npm fund` for details
found 35 moderate severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for detailsAdd Platform Android
❯ npx cap add android √ Adding native android project in android in 167.07ms √ Syncing Gradle in 1.45ms √ add in 169.83ms [success] android platform added! Follow the Developer Workflow guide to get building: https://capacitorjs.com/docs/v3/basics/workflow √ Copying web assets from dist to android\app\src\main\assets\public in 55.26ms √ Creating capacitor.config.json in android\app\src\main\assets in 3.50ms √ copy android in 164.93ms √ Updating Android plugins in 7.76ms √ update android in 75.79ms
Open Android Studio to build App
❯ npx cap open android [info] Opening Android project at: android.
