ionic-angular21-vitest-setup

Experimental Ionic + Angular 21 + Capacitor + Vitest Starter

A modern template for building mobile and web apps with the latest Angular, Ionic, and Capacitor, using Vitest for fast unit testing.

---

Features

• ⚡️ Angular 21 & Ionic 8 for modern UI
• 📱 Capacitor 8 for native Android integration
• 🧪 Vitest for lightning-fast unit testing
• 🛠️ Volta for Node/npm version management
• 🚀 Ready for Android Studio & device debugging

Note: This setup is experimental and intended for advanced users exploring alternatives to the default Ionic Angular (Jasmine/Karma) workflow. For production, follow the official Ionic upgrade path.

---

Stack

Tool	Version
Angular	21.x
Ionic Angular	8.x
Capacitor	8.x
Node	22.21.1 (via Volta)
npm	11.14.1 (via Volta)
Test runner	Vitest (@angular/build:unit-test)
Android build	Gradle + Android Studio, Java 21

Prerequisites

• Volta for Node/npm version management
• Android Studio with JDK 21
• Connected Android device for testing

Quick Start

npm install
npm start        # Dev server at http://localhost:8100
npm test         # Unit tests in watch mode
npm run build    # Development build

---

Common Workflows

Android Live Reload (2 terminals)

# Terminal 1
npm run ionic-serve

# Terminal 2
npm run cap-run-android-lr

Update the host IP in cap-run-android-lr if your LAN address changes.

Android WebView Debugging

npm run cap-run-android-debug

Then open chrome://inspect/#devices in Chrome.

Sync & Open in Android Studio

npm run cap-sync           # Production build + cap sync
npm run cap-android-studio

---

Scripts Reference

Script	Description
npm start	Dev server at localhost:8100 (browser only)
npm run ionic-serve	Dev server on all interfaces at port 8100 (for device reload)
npm run build	Development build
npm run build:prod	Production build
npm run cap-sync	Production build + Capacitor sync
npm run cap-run-android-lr	Deploy to device with live reload
npm run cap-run-android-debug	Dev build + sync + deploy for Chrome DevTools debugging
npm run cap-android-studio	Open Android project in Android Studio
npm test	Unit tests in watch mode
npm run test:coverage	Single test run with coverage report
npm run test:ui	Vitest UI dashboard in Chromium

See docs/scripts.md for full details.

---

Documentation

• Frontend Setup
• Scripts Reference
• Project Baseline Checklist
• One-page Checklist

---

Troubleshooting

Problem	Solution
ERR_CONNECTION_REFUSED on device	Use actual LAN IP (not 0.0.0.0) in cap-run-android-lr
invalid source release: 21	Pin JDK 21 in android/gradle.properties
Unknown arguments: host, port	Use explicit npm scripts, not Ionic CLI serve passthrough

See docs/frontend-setup.md for more.

---

License

MIT (or specify your license here)