{"id":30797157,"url":"https://github.com/krguptaa/ionic-angular-boilerplate","last_synced_at":"2026-04-19T03:04:41.921Z","repository":{"id":312372328,"uuid":"1046981338","full_name":"krguptaa/ionic-angular-boilerplate","owner":"krguptaa","description":"Ionic 8 + Angular 17 Boilerplate 🚀 – A production-ready starter kit for building cross-platform apps (Android, iOS, Web/PWA) with JWT authentication, secure storage, API layer, and modular theme customization.","archived":false,"fork":false,"pushed_at":"2025-09-08T08:39:26.000Z","size":316,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-08T09:08:08.279Z","etag":null,"topics":["cross-platform","hybrid-app","ionic","ionic-android","ionic-angular","ionic-angular-boilerplate","ionic-apps","ionic-boilerplate","ionic-framework","ionic-ios","ionic-native","ionic-pwa","ionic-starter","ionic8","mobile-app","mobile-app-development","mobile-application","mobile-development","progressive-web-app"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/krguptaa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-29T14:41:17.000Z","updated_at":"2025-09-08T08:39:30.000Z","dependencies_parsed_at":"2025-08-30T07:18:37.172Z","dependency_job_id":null,"html_url":"https://github.com/krguptaa/ionic-angular-boilerplate","commit_stats":null,"previous_names":["krguptaa/ionic-angular-boilerplate"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/krguptaa/ionic-angular-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krguptaa%2Fionic-angular-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krguptaa%2Fionic-angular-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krguptaa%2Fionic-angular-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krguptaa%2Fionic-angular-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krguptaa","download_url":"https://codeload.github.com/krguptaa/ionic-angular-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krguptaa%2Fionic-angular-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31992822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cross-platform","hybrid-app","ionic","ionic-android","ionic-angular","ionic-angular-boilerplate","ionic-apps","ionic-boilerplate","ionic-framework","ionic-ios","ionic-native","ionic-pwa","ionic-starter","ionic8","mobile-app","mobile-app-development","mobile-application","mobile-development","progressive-web-app"],"created_at":"2025-09-05T17:48:13.473Z","updated_at":"2026-04-19T03:04:41.910Z","avatar_url":"https://github.com/krguptaa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ionic 8 + Angular Boilerplate\n\nA modern mobile application built with Ionic 8 frontend and Angular 20. Supports Android, iOS, and Progressive Web App (PWA) deployment with JWT authentication, offline capabilities, and native device features.\n\n## 📋 Prerequisites\n\nBefore you begin, ensure your system meets these requirements:\n\n### System Requirements\n- **Operating System**: Windows 10/11, macOS 12+, or Linux (Ubuntu 20.04+)\n- **RAM**: Minimum 8GB (16GB recommended)\n- **Disk Space**: 10GB free space\n- **Internet**: Stable broadband connection\n\n### Required Software Versions\n\n| Software | Version | Purpose |\n|----------|---------|---------|\n| **Node.js** | 18.0.0+ | JavaScript runtime |\n| **npm** | 8.0.0+ | Package manager |\n| **Angular CLI** | 20.0.0+ | Angular development tools |\n| **Ionic CLI** | 7.0.0+ | Ionic development tools |\n| **Capacitor CLI** | 7.4.3+ | Native runtime tools |\n| **Java JDK** | 11+ (Android only) | Android development |\n| **Android Studio** | 2022+ (Android only) | Android IDE and SDK |\n| **Xcode** | 14+ (macOS only) | iOS development |\n\n## 🚀 Quick Start - Local Development (Web/PWA)\n\n### Step 1: Install Prerequisites\n\n#### Install Node.js and npm\n```bash\n# Download and install from https://nodejs.org/\n# Or using package manager:\n\n# Windows (using Chocolatey)\nchoco install nodejs\n\n# macOS (using Homebrew)\nbrew install node\n\n# Linux (Ubuntu/Debian)\ncurl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -\nsudo apt-get install -y nodejs\n```\n\n**Verify installation:**\n```bash\nnode --version    # Should show v18.x.x or higher\nnpm --version     # Should show 8.x.x or higher\n```\n\n#### Install Angular CLI\n```bash\nnpm install -g @angular/cli@20\nng version         # Should show Angular CLI 20.x.x\n```\n\n#### Install Ionic CLI\n```bash\nnpm install -g @ionic/cli@7\nionic --version    # Should show 7.x.x\n```\n\n### Step 2: Clone and Setup Project\n\n```bash\n# Clone the repository\ngit clone \u003cyour-repository-url\u003e ionic-app\ncd ionic-app\n\n# Install project dependencies\nnpm install\n\n# Verify installation\nnpm list --depth=0\n```\n\n### Step 3: Configure Environment\n\n#### Local Development Environment\n**File:** `src/environments/environment.ts`\n```typescript\nexport const environment = {\n  production: false,\n  apiUrl: 'http://localhost:8000',  // Your backend API URL\n  corsBypass: true\n};\n```\n\n#### UAT Environment\n**File:** `src/environments/environment.uat.ts`\n```typescript\nexport const environment = {\n  production: false,\n  apiUrl: 'https://uat1.demo.com'  // Your UAT backend URL\n};\n```\n\n#### Production Environment\n**File:** `src/environments/environment.prod.ts`\n```typescript\nexport const environment = {\n  production: true,\n  apiUrl: 'https://app.demo.com'  // Your production backend URL\n};\n```\n\n### Step 4: Configure Proxy (for Local Development)\n\n**File:** `proxy.conf.json`\n```json\n{\n  \"/simulator-services/*\": {\n    \"target\": \"http://localhost:8000\",\n    \"secure\": false,\n    \"changeOrigin\": true,\n    \"logLevel\": \"debug\"\n  },\n  \"/simulator/*\": {\n    \"target\": \"http://localhost:8000\",\n    \"secure\": false,\n    \"changeOrigin\": true,\n    \"logLevel\": \"debug\"\n  }\n}\n```\n\n### Step 5: Run Local Development Server\n\n```bash\n# Start development server with proxy\nng serve\n\n# Or use Ionic CLI\nionic serve\n\n# Access the app at: http://localhost:4200\n```\n\n### Step 6: Run Tests (Optional)\n\n```bash\n# Run unit tests\nnpm test\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Run linting\nnpm run lint\n```\n\n## 📱 Android Setup and Development\n\n### Step 1: Install Java Development Kit (JDK)\n\n```bash\n# Download from https://adoptium.net/\n# Or using package manager:\n\n# Windows/macOS: Download and install JDK 11 or 17\n# Linux:\nsudo apt update\nsudo apt install openjdk-11-jdk\n```\n\n**Verify installation:**\n```bash\njava -version     # Should show Java 11 or 17\njavac -version    # Should show javac 11.x.x or 17.x.x\n```\n\n### Step 2: Install Android Studio\n\n1. **Download Android Studio**\n   - Visit: https://developer.android.com/studio\n   - Download the latest stable version\n\n2. **Install Android Studio**\n   - Run the installer\n   - Select \"Standard\" installation\n   - Wait for SDK components to download\n\n3. **Configure Android SDK**\n   - Open Android Studio\n   - Go to **File \u003e Settings \u003e Appearance \u0026 Behavior \u003e System Settings \u003e Android SDK**\n   - Install:\n     - Android 13.0 (API 33) or later\n     - Android SDK Build-Tools 33.0+\n     - Android SDK Platform-Tools\n     - Android Emulator\n     - Google Play services\n\n### Step 3: Configure Environment Variables\n\n#### Windows\n```cmd\n# Open Command Prompt as Administrator\nsetx ANDROID_HOME \"C:\\Users\\%USERNAME%\\AppData\\Local\\Android\\Sdk\"\nsetx PATH \"%PATH%;%ANDROID_HOME%\\platform-tools;%ANDROID_HOME%\\tools;%ANDROID_HOME%\\tools\\bin\"\n\n# Restart Command Prompt and verify\necho %ANDROID_HOME%\nadb version\n```\n\n#### macOS/Linux\n```bash\n# Add to ~/.bashrc or ~/.zshrc\nexport ANDROID_HOME=$HOME/Library/Android/sdk  # macOS\n# OR\nexport ANDROID_HOME=$HOME/Android/Sdk          # Linux\n\nexport PATH=$PATH:$ANDROID_HOME/platform-tools\nexport PATH=$PATH:$ANDROID_HOME/tools\nexport PATH=$PATH:$ANDROID_HOME/tools/bin\n\n# Reload shell\nsource ~/.bashrc\n```\n\n### Step 4: Add Android Platform to Project\n\n```bash\n# Navigate to project directory\ncd ionic-app\n\n# Add Android platform\nnpx cap add android\n\n# Sync web assets to Android project\nnpx cap sync android\n```\n\n### Step 5: Configure Android Permissions\n\n**File:** `android/app/src/main/AndroidManifest.xml`\n\n```xml\n\u003cmanifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\u003e\n    \u003c!-- Network permissions --\u003e\n    \u003cuses-permission android:name=\"android.permission.INTERNET\" /\u003e\n    \u003cuses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" /\u003e\n\n    \u003c!-- Camera permissions --\u003e\n    \u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n    \u003cuses-feature android:name=\"android.hardware.camera\" android:required=\"false\" /\u003e\n\n    \u003c!-- Location permissions --\u003e\n    \u003cuses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" /\u003e\n    \u003cuses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" /\u003e\n\n    \u003c!-- Push notification permissions --\u003e\n    \u003cuses-permission android:name=\"com.google.android.c2dm.permission.RECEIVE\" /\u003e\n\n    \u003capplication\n        android:allowBackup=\"true\"\n        android:icon=\"@mipmap/ic_launcher\"\n        android:label=\"@string/app_name\"\n        android:theme=\"@style/AppTheme\"\n        android:usesCleartextTraffic=\"true\"\u003e\n\n        \u003c!-- Main Activity --\u003e\n        \u003cactivity\n            android:configChanges=\"orientation|keyboardHidden|keyboard|screenSize|locale\"\n            android:label=\"@string/title_activity_main\"\n            android:launchMode=\"singleTask\"\n            android:name=\".MainActivity\"\n            android:theme=\"@style/AppTheme.NoActionBarLaunch\"\n            android:exported=\"true\"\u003e\n\n            \u003cintent-filter\u003e\n                \u003caction android:name=\"android.intent.action.MAIN\" /\u003e\n                \u003ccategory android:name=\"android.intent.category.LAUNCHER\" /\u003e\n            \u003c/intent-filter\u003e\n        \u003c/activity\u003e\n    \u003c/application\u003e\n\u003c/manifest\u003e\n```\n\n### Step 6: Build Android APK\n\n```bash\n# Build web assets for production\nng build\n\n# Sync to Android project\nnpx cap sync android\n\n# Open in Android Studio\nnpx cap open android\n```\n\n### Step 7: Run on Android Device/Emulator\n\n#### Using Android Studio\n1. Open Android Studio (from `npx cap open android`)\n2. Select device/emulator from toolbar\n3. Click **Run** button (green play icon)\n\n#### Using Command Line\n```bash\n# Run on connected device\nnpx cap run android\n\n# Run on specific device\nnpx cap run android --target=\u003cdevice-id\u003e\n\n# List available devices\nadb devices\n```\n\n### Step 8: Generate Production APK\n\n```bash\n# Build release APK\nnpx cap build android\n\n# In Android Studio:\n# Build \u003e Build Bundle(s)/APK(s) \u003e Build APK(s)\n# Find APK at: android/app/build/outputs/apk/release/\n```\n\n## 🍎 iOS Setup and Development (macOS Only)\n\n### Step 1: Install Xcode\n\n1. **Open App Store** on your Mac\n2. **Search for \"Xcode\"**\n3. **Click Get** and wait for download/installation\n4. **Launch Xcode** and accept license agreement\n\n**Alternative:** Download from [developer.apple.com](https://developer.apple.com/download/)\n\n### Step 2: Install Command Line Tools\n\n```bash\n# Install Xcode command line tools\nxcode-select --install\n\n# Accept Xcode license\nsudo xcodebuild -license accept\n```\n\n**Verify installation:**\n```bash\nxcodebuild -version    # Should show Xcode 14.x.x\nxcode-select -p        # Should show /Applications/Xcode.app/Contents/Developer\n```\n\n### Step 3: Install CocoaPods (Dependency Manager)\n\n```bash\n# Install CocoaPods\nsudo gem install cocoapods\n\n# Verify installation\npod --version\n```\n\n### Step 4: Set Up Apple Developer Account\n\n1. **Visit:** https://developer.apple.com/\n2. **Sign up** for Apple Developer Program ($99/year)\n3. **Create App ID** and **Provisioning Profiles**\n4. **Generate Certificates** for code signing\n\n### Step 5: Add iOS Platform to Project\n\n```bash\n# Navigate to project directory\ncd ionic-app\n\n# Add iOS platform\nnpx cap add ios\n\n# Sync web assets to iOS project\nnpx cap sync ios\n```\n\n### Step 6: Configure iOS Permissions\n\n**File:** `ios/App/App/Info.plist`\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003c!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\"\u003e\n\u003cplist version=\"1.0\"\u003e\n\u003cdict\u003e\n    \u003c!-- Basic App Information --\u003e\n    \u003ckey\u003eCFBundleDisplayName\u003c/key\u003e\n    \u003cstring\u003eIonic App\u003c/string\u003e\n    \u003ckey\u003eCFBundleIdentifier\u003c/key\u003e\n    \u003cstring\u003ecom.yourcompany.yourapp\u003c/string\u003e\n    \u003ckey\u003eCFBundleShortVersionString\u003c/key\u003e\n    \u003cstring\u003e1.0.0\u003c/string\u003e\n    \u003ckey\u003eCFBundleVersion\u003c/key\u003e\n    \u003cstring\u003e1\u003c/string\u003e\n\n    \u003c!-- iOS Version Requirements --\u003e\n    \u003ckey\u003eLSMinimumSystemVersion\u003c/key\u003e\n    \u003cstring\u003e12.0\u003c/string\u003e\n    \u003ckey\u003eUIRequiredDeviceCapabilities\u003c/key\u003e\n    \u003carray\u003e\n        \u003cstring\u003earm64\u003c/string\u003e\n    \u003c/array\u003e\n\n    \u003c!-- Network Permissions --\u003e\n    \u003ckey\u003eNSAppTransportSecurity\u003c/key\u003e\n    \u003cdict\u003e\n        \u003ckey\u003eNSAllowsArbitraryLoads\u003c/key\u003e\n        \u003ctrue/\u003e\n        \u003ckey\u003eNSAllowsLocalNetworking\u003c/key\u003e\n        \u003ctrue/\u003e\n    \u003c/dict\u003e\n\n    \u003c!-- Camera Permissions --\u003e\n    \u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n    \u003cstring\u003eThis app needs camera access to take photos\u003c/string\u003e\n    \u003ckey\u003eNSPhotoLibraryUsageDescription\u003c/key\u003e\n    \u003cstring\u003eThis app needs photo library access to select images\u003c/string\u003e\n\n    \u003c!-- Location Permissions --\u003e\n    \u003ckey\u003eNSLocationWhenInUseUsageDescription\u003c/key\u003e\n    \u003cstring\u003eThis app needs location access for location-based features\u003c/string\u003e\n    \u003ckey\u003eNSLocationAlwaysAndWhenInUseUsageDescription\u003c/key\u003e\n    \u003cstring\u003eThis app needs background location access\u003c/string\u003e\n\n    \u003c!-- Push Notification Permissions --\u003e\n    \u003ckey\u003eUIBackgroundModes\u003c/key\u003e\n    \u003carray\u003e\n        \u003cstring\u003eremote-notification\u003c/string\u003e\n    \u003c/array\u003e\n\n    \u003c!-- Orientation Support --\u003e\n    \u003ckey\u003eUISupportedInterfaceOrientations\u003c/key\u003e\n    \u003carray\u003e\n        \u003cstring\u003eUIInterfaceOrientationPortrait\u003c/string\u003e\n        \u003cstring\u003eUIInterfaceOrientationLandscapeLeft\u003c/string\u003e\n        \u003cstring\u003eUIInterfaceOrientationLandscapeRight\u003c/string\u003e\n    \u003c/array\u003e\n\u003c/dict\u003e\n\u003c/plist\u003e\n```\n\n### Step 7: Configure Code Signing\n\n1. **Open in Xcode:**\n   ```bash\n   npx cap open ios\n   ```\n\n2. **Select Development Team:**\n   - In Xcode, select your project\n   - Go to **Signing \u0026 Capabilities**\n   - Select your Apple Developer account\n   - Choose appropriate provisioning profile\n\n3. **Update Bundle Identifier:**\n   - Ensure it matches your App Store Connect app\n\n### Step 8: Build iOS App\n\n```bash\n# Build web assets for production\nng build\n\n# Sync to iOS project\nnpx cap sync ios\n\n# Open in Xcode\nnpx cap open ios\n```\n\n### Step 9: Run on iOS Device/Simulator\n\n#### Using Xcode\n1. Open Xcode (from `npx cap open ios`)\n2. Select device/simulator from toolbar\n3. Click **Run** button (play icon)\n\n#### Using Command Line\n```bash\n# Run on connected device\nnpx cap run ios\n\n# Run on specific simulator\nnpx cap run ios --target=\"iPhone 14\"\n\n# List available simulators\nxcrun simctl list devices\n```\n\n### Step 10: Generate Production IPA\n\n```bash\n# Build for release\nnpx cap build ios\n\n# In Xcode:\n# 1. Select \"Any iOS Device\" as target\n# 2. Go to Product \u003e Archive\n# 3. Wait for archive to complete\n# 4. Export IPA for App Store submission\n```\n\n## 🌐 PWA Setup and Deployment\n\n### Step 1: Configure PWA Manifest\n\n**File:** `src/manifest.json`\n\n```json\n{\n  \"name\": \"Ionic App\",\n  \"short_name\": \"IonicApp\",\n  \"description\": \"A modern web application built with Ionic\",\n  \"start_url\": \"/\",\n  \"display\": \"standalone\",\n  \"background_color\": \"#ffffff\",\n  \"theme_color\": \"#3880ff\",\n  \"orientation\": \"portrait-primary\",\n  \"scope\": \"/\",\n  \"lang\": \"en-US\",\n  \"icons\": [\n    {\n      \"src\": \"assets/icon/icon-72x72.png\",\n      \"sizes\": \"72x72\",\n      \"type\": \"image/png\",\n      \"purpose\": \"maskable any\"\n    },\n    {\n      \"src\": \"assets/icon/icon-96x96.png\",\n      \"sizes\": \"96x96\",\n      \"type\": \"image/png\",\n      \"purpose\": \"maskable any\"\n    },\n    {\n      \"src\": \"assets/icon/icon-128x128.png\",\n      \"sizes\": \"128x128\",\n      \"type\": \"image/png\",\n      \"purpose\": \"maskable any\"\n    },\n    {\n      \"src\": \"assets/icon/icon-144x144.png\",\n      \"sizes\": \"144x144\",\n      \"type\": \"image/png\",\n      \"purpose\": \"maskable any\"\n    },\n    {\n      \"src\": \"assets/icon/icon-192x192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image/png\",\n      \"purpose\": \"maskable any\"\n    },\n    {\n      \"src\": \"assets/icon/icon-512x512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image/png\",\n      \"purpose\": \"maskable any\"\n    }\n  ],\n  \"categories\": [\"business\", \"productivity\"],\n  \"screenshots\": [\n    {\n      \"src\": \"assets/screenshots/screenshot1.png\",\n      \"sizes\": \"1280x720\",\n      \"type\": \"image/png\",\n      \"label\": \"App Homepage\"\n    }\n  ]\n}\n```\n\n### Step 2: Configure Service Worker\n\n**File:** `ngsw-config.json`\n\n```json\n{\n  \"$schema\": \"./node_modules/@angular/service-worker/config/schema.json\",\n  \"index\": \"/index.html\",\n  \"assetGroups\": [\n    {\n      \"name\": \"app\",\n      \"installMode\": \"prefetch\",\n      \"resources\": {\n        \"files\": [\n          \"/favicon.ico\",\n          \"/index.html\",\n          \"/manifest.json\",\n          \"/*.css\",\n          \"/*.js\"\n        ]\n      }\n    },\n    {\n      \"name\": \"assets\",\n      \"installMode\": \"lazy\",\n      \"updateMode\": \"prefetch\",\n      \"resources\": {\n        \"files\": [\n          \"/assets/**\",\n          \"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)\"\n        ]\n      }\n    }\n  ],\n  \"dataGroups\": [\n    {\n      \"name\": \"api-performance\",\n      \"urls\": [\"/api/**\"],\n      \"cacheConfig\": {\n        \"strategy\": \"performance\",\n        \"maxSize\": 100,\n        \"maxAge\": \"1h\"\n      }\n    }\n  ]\n}\n```\n\n### Step 3: Update index.html for PWA\n\n**File:** `src/index.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\" /\u003e\n  \u003ctitle\u003eIonic App\u003c/title\u003e\n\n  \u003cbase href=\"/\" /\u003e\n\n  \u003cmeta name=\"viewport\" content=\"viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\" /\u003e\n  \u003cmeta name=\"format-detection\" content=\"telephone=no\" /\u003e\n  \u003cmeta name=\"msapplication-tap-highlight\" content=\"no\" /\u003e\n\n  \u003c!-- PWA Meta Tags --\u003e\n  \u003cmeta name=\"theme-color\" content=\"#3880ff\" /\u003e\n  \u003cmeta name=\"apple-mobile-web-app-capable\" content=\"yes\" /\u003e\n  \u003cmeta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\" /\u003e\n  \u003cmeta name=\"apple-mobile-web-app-title\" content=\"Ionic App\" /\u003e\n\n  \u003c!-- Favicon and Icons --\u003e\n  \u003clink rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"assets/icon/favicon.png\" /\u003e\n  \u003clink rel=\"apple-touch-icon\" href=\"assets/icon/icon-192x192.png\" /\u003e\n  \u003clink rel=\"manifest\" href=\"manifest.json\" /\u003e\n\n  \u003c!-- Preload critical resources --\u003e\n  \u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"\u003e\n  \u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003capp-root\u003e\u003c/app-root\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n### Step 4: Build for PWA\n\n```bash\n# Build for production with PWA support\nng build\n\n# The build output will be in 'www/' directory\n# Service worker and web app manifest are automatically included\n```\n\n### Step 5: Test PWA Locally\n\n```bash\n# Install http-server globally\nnpm install -g http-server\n\n# Serve the built app\nhttp-server www -p 8080 -c-1\n\n# Open browser to http://localhost:8080\n# Use Chrome DevTools \u003e Lighthouse to test PWA features\n```\n\n### Step 6: Deploy PWA\n\n#### Option 1: Firebase Hosting\n```bash\n# Install Firebase CLI\nnpm install -g firebase-tools\n\n# Login and initialize\nfirebase login\nfirebase init hosting\n\n# Deploy\nfirebase deploy\n```\n\n#### Option 2: Vercel\n```bash\n# Install Vercel CLI\nnpm install -g vercel\n\n# Deploy\nvercel --prod\n```\n\n#### Option 3: Netlify\n```bash\n# Install Netlify CLI\nnpm install -g netlify-cli\n\n# Deploy\nnetlify deploy --prod --dir=www\n```\n\n## 🔧 Environment Configuration\n\n### Switching Between Environments\n\n```bash\n# Development (default)\nng serve\n\n# Production build\nng build\n\n# Watch mode\nng build --watch --configuration development\n```\n\n### Environment Files\n\n- **`environment.ts`** - Local development\n- **`environment.uat.ts`** - User Acceptance Testing\n- **`environment.prod.ts`** - Production\n\n## 🧪 Testing\n\n### Run Unit Tests\n```bash\n# Run all tests\nnpm test\n\n# Run tests once (CI mode)\nnpm run test:ci\n\n# Run with coverage\nnpm run test:coverage\n```\n\n### Run E2E Tests\n```bash\n# Install Cypress (if not included)\nnpm install cypress --save-dev\n\n# Run E2E tests\nnpx cypress run\n```\n\n### Code Quality\n```bash\n# Lint code\nnpm run lint\n\n# Format code\nnpm run format\n\n# Run all quality checks\nnpm run quality\n```\n\n## 📦 Build Commands\n\n### Web/PWA Builds\n```bash\n# Development build\nng build\n\n# Production build\nng build\n\n# Watch mode\nng build --watch --configuration development\n```\n\n### Native Builds\n```bash\n# Android build\nng build\nnpx cap sync android\nnpx cap open android\n\n# iOS build\nng build\nnpx cap sync ios\nnpx cap open ios\n```\n\n## 🚀 Deployment\n\n### Web/PWA Deployment\n```bash\n# Build for production\nng build\n\n# Deploy to your hosting service\n# Options: Firebase, Vercel, Netlify, AWS S3, etc.\n```\n\n### Android Deployment\n```bash\n# Build and sync\nng build\nnpx cap sync android\n\n# Generate signed APK/AAB in Android Studio\n# Upload to Google Play Store\n```\n\n### iOS Deployment\n```bash\n# Build and sync\nng build\nnpx cap sync ios\n\n# Archive in Xcode\n# Upload to App Store Connect\n```\n\n## 📋 Quick Setup Checklist\n\n### For All Platforms\n- [ ] Node.js 18+ installed\n- [ ] Angular CLI 20+ installed\n- [ ] Ionic CLI 7+ installed\n- [ ] Project cloned and dependencies installed\n- [ ] Environment files configured\n- [ ] Development server runs without errors\n\n### For Android Development\n- [ ] Java JDK 11+ installed\n- [ ] Android Studio installed\n- [ ] Android SDK configured\n- [ ] Environment variables set\n- [ ] Android platform added\n- [ ] Permissions configured\n\n### For iOS Development\n- [ ] Xcode 14+ installed\n- [ ] Command line tools installed\n- [ ] Apple Developer account\n- [ ] CocoaPods installed\n- [ ] iOS platform added\n- [ ] Code signing configured\n\n### For PWA Development\n- [ ] Web app manifest configured\n- [ ] Service worker enabled\n- [ ] HTTPS enabled for production\n- [ ] Icons and splash screens added\n\n## 🔧 Troubleshooting\n\n### Common Issues\n\n1. **Build Errors**\n   ```bash\n   # Clear cache and reinstall\n   rm -rf node_modules package-lock.json\n   npm cache clean --force\n   npm install\n   ```\n\n2. **Platform Sync Issues**\n   ```bash\n   # Clean and resync\n   npx cap clean\n   npx cap sync\n   ```\n\n3. **Environment Issues**\n   ```bash\n   # Check environment files\n   cat src/environments/environment.ts\n   ```\n\n4. **Port Conflicts**\n   ```bash\n   # Use different port\n   ng serve --port=4201\n   ```\n\n## 📚 Documentation\n\n- **Complete Documentation**: See `/docs` folder\n- **Ionic Documentation**: https://ionicframework.com/docs\n- **Angular Documentation**: https://angular.io/docs\n- **Capacitor Documentation**: https://capacitorjs.com/docs\n\n## 📞 Support\n\n- **Documentation**: Check `/docs` folder first\n- **Issues**: Create GitHub issue with detailed information\n- **Community**: Ionic Discord or Stack Overflow\n\n---\n\n## 🎯 Success Criteria\n\n✅ **Local Development**: App runs at http://localhost:4200\n✅ **Android**: APK generated and runs on device/emulator\n✅ **iOS**: IPA generated and runs on device/simulator\n✅ **PWA**: Lighthouse PWA score \u003e 90\n✅ **Build**: All platforms build successfully\n✅ **Tests**: Unit tests pass with good coverage\n\n**Ready to start developing! 🚀**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrguptaa%2Fionic-angular-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrguptaa%2Fionic-angular-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrguptaa%2Fionic-angular-boilerplate/lists"}