--- description: Step-by-step guide to wrap an existing Angular web app into a native iOS and Android app using Capacitor, Ionic, and Firebase. title: How to Wrap an Angular App with Capacitor and Firebase - Capawesome image: https://capawesome.io/docs/assets/images/social/blog/how-to-wrap-an-angular-app-with-capacitor-and-firebase.png --- [Skip to content ](#how-to-wrap-an-angular-app-with-capacitor-and-firebase) [🖥️ Introducing the **Capacitor Electron Platform** — build desktop apps for macOS, Windows, and Linux. Free & open source. ](/blog/announcing-the-capacitor-electron-platform/) * [ SDKs ](/docs/sdks/) * [ Formbricks ](/docs/sdks/capacitor/formbricks/) * [ Geocoder ](/docs/sdks/capacitor/geocoder/) * [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/) * [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/) * [ Gyroscope ](/docs/sdks/capacitor/gyroscope/) * [ Haptics ](/docs/sdks/capacitor/haptics/) * [ Home Indicator ](/docs/sdks/capacitor/home-indicator/) * [ In-App Browser ](/docs/sdks/capacitor/in-app-browser/) * [ Install Referrer ](/docs/sdks/capacitor/install-referrer/) * [ Intercom ](/docs/sdks/capacitor/intercom/) * [ Intune ](/docs/sdks/capacitor/intune/) * [ Keep Awake ](/docs/sdks/capacitor/keep-awake/) * [ libSQL ](/docs/sdks/capacitor/libsql/) * [ Light Sensor ](/docs/sdks/capacitor/light-sensor/) * [ Live Update ](/docs/sdks/capacitor/live-update/) * [ Localization ](/docs/sdks/capacitor/localization/) * [ Mail Composer ](/docs/sdks/capacitor/mail-composer/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * [ Maps Launcher ](/docs/sdks/capacitor/maps-launcher/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/) * [ Network ](/docs/sdks/capacitor/network/) * [ NFC ](/docs/sdks/capacitor/nfc/) * [ Node.js ](/docs/sdks/capacitor/nodejs/) * [ OAuth ](/docs/sdks/capacitor/oauth/) * [ Passkeys ](/docs/sdks/capacitor/passkeys/) * [ Password Autofill ](/docs/sdks/capacitor/password-autofill/) * [ PDF Generator ](/docs/sdks/capacitor/pdf-generator/) * [ PDF Viewer ](/docs/sdks/capacitor/pdf-viewer/) * [ Pedometer ](/docs/sdks/capacitor/pedometer/) * [ Permissions ](/docs/sdks/capacitor/permissions/) * [ Phone Dialer ](/docs/sdks/capacitor/phone-dialer/) * [ Photo Editor ](/docs/sdks/capacitor/photo-editor/) * [ Photo Manipulator ](/docs/sdks/capacitor/photo-manipulator/) * [ PixLive ](/docs/sdks/capacitor/pixlive/) * [ PostHog ](/docs/sdks/capacitor/posthog/) * [ Printer ](/docs/sdks/capacitor/printer/) * [ Privacy Screen ](/docs/sdks/capacitor/privacy-screen/) * [ Proximity Sensor ](/docs/sdks/capacitor/proximity-sensor/) * [ Purchases ](/docs/sdks/capacitor/purchases/) * [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/) * [ Root Detection ](/docs/sdks/capacitor/root-detection/) * [ Screen Brightness ](/docs/sdks/capacitor/screen-brightness/) * [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/) * [ Screen Reader ](/docs/sdks/capacitor/screen-reader/) * [ Screenshot ](/docs/sdks/capacitor/screenshot/) * [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/) * [ Settings Launcher ](/docs/sdks/capacitor/settings-launcher/) * [ Shake ](/docs/sdks/capacitor/shake/) * [ Silent Mode ](/docs/sdks/capacitor/silent-mode/) * [ SIM ](/docs/sdks/capacitor/sim/) * [ SMS Composer ](/docs/sdks/capacitor/sms-composer/) * [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/) * [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/) * [ Share Target ](/docs/sdks/capacitor/share-target/) * [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/) * [ SQLite ](/docs/sdks/capacitor/sqlite/) * [ Superwall ](/docs/sdks/capacitor/superwall/) * [ System WebView ](/docs/sdks/capacitor/system-webview/) * [ Tauri ](/docs/sdks/capacitor/tauri/) * [ Text Interaction ](/docs/sdks/capacitor/text-interaction/) * [ Text Zoom ](/docs/sdks/capacitor/text-zoom/) * [ Thermal State ](/docs/sdks/capacitor/thermal-state/) * [ Toast ](/docs/sdks/capacitor/toast/) * [ Torch ](/docs/sdks/capacitor/torch/) * [ Vault ](/docs/sdks/capacitor/vault/) * [ Volume ](/docs/sdks/capacitor/volume/) * [ Wallet ](/docs/sdks/capacitor/wallet/) * [ Wifi ](/docs/sdks/capacitor/wifi/) * [ YouTube Player ](/docs/sdks/capacitor/youtube-player/) * [ Zip ](/docs/sdks/capacitor/zip/) * [ Cordova ](/docs/sdks/cordova/) * [ Cloud ](/docs/cloud/) * [ Integrations ](/docs/cloud/live-updates/integrations/) * Concepts * Reference * [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/) * [ FAQ ](/docs/cloud/live-updates/faq/) * [ Native Builds ](/docs/cloud/native-builds/) * [ Set Up Environments ](/docs/cloud/native-builds/environments/) * [ Overwrite Native Configurations ](/docs/cloud/native-builds/native-configurations/) * [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/) * [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/) * [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/) * [ Use pnpm, Yarn, or bun ](/docs/cloud/native-builds/package-managers/) * [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/) * [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/) * [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/) * [ Build without Git ](/docs/cloud/native-builds/build-without-git/) * [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/) * [ Integrations ](/docs/cloud/native-builds/integrations/) * Reference * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ FAQ ](/docs/cloud/native-builds/faq/) * [ App Store Publishing ](/docs/cloud/app-store-publishing/) * [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/) * [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/) * [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/) * [ FAQ ](/docs/cloud/app-store-publishing/faq/) * [ Automations ](/docs/cloud/automations/) * [ Reference ](/docs/cloud/automations/reference/) * [ Troubleshooting ](/docs/cloud/automations/troubleshooting/) * [ FAQ ](/docs/cloud/automations/faq/) * [ Assist ](/docs/cloud/assist/) * [ CLI ](/docs/cloud/cli/) * APIs and SDKs * [ Webhooks ](/docs/cloud/webhooks/) * [ Integrations ](/docs/cloud/integrations/) * Account * [ Organization ](/docs/cloud/organizations/) * [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/) * [ Audit Logs ](/docs/cloud/organizations/audit-logs/) * [ Billing ](/docs/cloud/organizations/billing/) * [ License Keys ](/docs/cloud/license-keys/) * [ AI ](/docs/ai/) * [ Insiders ](/docs/insiders/) * [ Billing & Plans ](/docs/insiders/billing-and-plans/) * [ FAQ ](/docs/insiders/faq/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/support/) * [ Contributing ](/docs/contributing/) * Contributing code * [ Code of Conduct ](/docs/contributing/code-of-conduct/) * [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion) * [ Blog ](/blog/) * Categories * [ Add Capacitor to Your Angular Project ](#add-capacitor-to-your-angular-project) * [ Set Up Your Own Firebase Project ](#set-up-your-own-firebase-project) * [ Integrate Firebase with Capacitor ](#integrate-firebase-with-capacitor) * [ Adding Native Features ](#adding-native-features) * [ Production Delivery with Capawesome Cloud ](#production-delivery-with-capawesome-cloud) * [ FAQ ](#faq) * [ Related Posts ](#related-posts) * [ Try Capawesome Cloud ](#try-capawesome-cloud) * [ Conclusion ](#conclusion) * Related links # How to Wrap an Angular App with Capacitor and Firebase[¶](#how-to-wrap-an-angular-app-with-capacitor-and-firebase "Permanent link") If you already have an Angular web app, you can wrap it into a native iOS and Android app without rewriting your entire codebase. In this guide, we use a real demo app called **Trip Expenses** to walk through the full process with Capacitor, Ionic, Firebase, and a handful of native plugins. Get the code The complete source code is available on [GitHub](https://github.com/capawesome-team/capacitor-angular-starter-guide), free to clone and adapt for your own project. The demo covers the parts most production apps need: trip and expense management, receipt attachments as images or PDFs, image compression before upload, profile pictures via the device camera, and custom icons and splash screens for both platforms. The stack is Angular 21 with Ionic 8 for the UI, Capacitor 8 for the native runtime, and Firebase (Cloud Firestore and Cloud Storage) for data and files. On the Capacitor side, we rely on the [Camera](https://capacitorjs.com/docs/apis/camera) and [Splash Screen](https://capacitorjs.com/docs/apis/splash-screen) plugins from the Capacitor team, together with the [Capacitor File Picker plugin](/docs/sdks/capacitor/file-picker/), [Capacitor File Compressor plugin](/docs/sdks/capacitor/file-compressor/), [Capacitor Firebase Cloud Firestore plugin](/docs/sdks/capacitor/firebase/cloud-firestore/), and [Capacitor Firebase Cloud Storage plugin](/docs/sdks/capacitor/firebase/cloud-storage/) plugins from Capawesome. Note The example uses Angular, but the same concepts apply to any web project — Capacitor is framework-agnostic. ## Important Definitions for Your First Capacitor App[¶](#important-definitions-for-your-first-capacitor-app "Permanent link") Before jumping into the code, let's clarify a few concepts and answer some common questions, especially if this is your first time working with Capacitor. ### What Is Capacitor?[¶](#what-is-capacitor "Permanent link") Capacitor is an open-source runtime developed by the Ionic team that lets you run your web app as a native iOS and Android app. It wraps your built web assets in a native shell, so your Angular code still powers the UI and business logic. You keep a single codebase for most features, access native device APIs through plugins as you need them, and ship updates through the standard app store workflow — adding native capabilities progressively over time. ### Angular Web vs Mobile Runtime: Key Differences[¶](#angular-web-vs-mobile-runtime-key-differences "Permanent link") Before you start, it helps to know what changes when your Angular app runs inside Capacitor. The app runs inside a native `WebView` rather than a browser tab, which means iOS and Android permission models now apply (`Info.plist` and `AndroidManifest.xml`). File handling looks different too: native paths like `file://` and `content://` enter the picture, and memory constraints matter more than they do on the web. And instead of a web deploy, releases involve native binaries and the regular app store workflow. Your Angular code still drives most of the product, but the quality of the native integration directly affects reliability, UX, and performance. ### What Is a Capacitor Plugin?[¶](#what-is-a-capacitor-plugin "Permanent link") A Capacitor plugin is the bridge between your TypeScript code and native iOS and Android APIs. It typically ships a TypeScript API along with native iOS and Android implementations, plus an optional web implementation so the same code path works in the browser. In this project, that means using native integrations where they matter most — camera, file picking, Firebase on device — while keeping a single Angular codebase. ### Is Ionic Required?[¶](#is-ionic-required "Permanent link") No, Ionic is optional. It's a [mobile UI toolkit](https://ionicframework.com/docs/components) that gives you production-ready components and app-like UX patterns out of the box, but if your team already has a design system, you can use Capacitor with plain Angular. ## Add Capacitor to Your Angular Project[¶](#add-capacitor-to-your-angular-project "Permanent link") Install the Capacitor core and CLI packages, then initialize the project: `[](#%5F%5Fcodelineno-0-1)npm install @capacitor/core@latest [](#%5F%5Fcodelineno-0-2)npm install -D @capacitor/cli@latest [](#%5F%5Fcodelineno-0-3)npx cap init ` The CLI will prompt you for your app name (e.g. `Trip Expenses`), app ID (e.g. `io.tripexpenses.app`), and web output directory (`www` or your Angular `dist/` directory) — use your own values here. Next, add the iOS and Android platforms: `[](#%5F%5Fcodelineno-1-1)npm install @capacitor/ios@latest @capacitor/android@latest [](#%5F%5Fcodelineno-1-2)npx cap add ios [](#%5F%5Fcodelineno-1-3)npx cap add android ` That's it. Your Angular web app is now wrapped in a native shell and ready to run on both platforms. ### Build, Sync, and Run[¶](#build-sync-and-run "Permanent link") The Capacitor development workflow takes a couple of tries to get used to, but the loop is short. Whenever you change web code, rebuild and sync the changes into the native projects: `[](#%5F%5Fcodelineno-2-1)npm run build [](#%5F%5Fcodelineno-2-2)npx cap sync ` To open the native projects in Xcode or Android Studio: `[](#%5F%5Fcodelineno-3-1)npx cap open ios [](#%5F%5Fcodelineno-3-2)npx cap open android ` Or run directly on a simulator or device: `[](#%5F%5Fcodelineno-4-1)npx cap run ios [](#%5F%5Fcodelineno-4-2)npx cap run android ` ### Generate App Icons and Splash Screens[¶](#generate-app-icons-and-splash-screens "Permanent link") You can generate icons and splash screens for both platforms with the [@capacitor/assets](https://github.com/ionic-team/capacitor-assets) tool. Install it as a dev dependency, drop your own `icon-only.png` and `splash.png` into the `resources/` folder, and let the CLI do the rest: `[](#%5F%5Fcodelineno-5-1)npm install -D @capacitor/assets@latest [](#%5F%5Fcodelineno-5-2)npx capacitor-assets generate --ios [](#%5F%5Fcodelineno-5-3)npx capacitor-assets generate --android ` This produces all the required platform assets. The tool has more configuration options if you need finer control — check its README. ## Set Up Your Own Firebase Project[¶](#set-up-your-own-firebase-project "Permanent link") If you clone the [demo app](https://github.com/capawesome-team/capacitor-angular-starter-guide), you'll need to create your own Firebase project before running it. ### 1) Create Firebase Resources[¶](#1-create-firebase-resources "Permanent link") In the [Firebase Console](https://console.firebase.google.com/), create a new project and enable both **Cloud Firestore** and **Cloud Storage**. ### 2) Register App Clients[¶](#2-register-app-clients "Permanent link") Under the same Firebase project, register a Web app for the Angular runtime, an Android app with package name `io.tripexpenses.app`, and an iOS app with bundle ID `io.tripexpenses.app`. Replace those identifiers with your own. ### 3) Configure Web Firebase Values[¶](#3-configure-web-firebase-values "Permanent link") Add your Web SDK config to `src/environments/environment.ts` and `src/environments/environment.prod.ts`. ### 4) Configure Native Firebase Files[¶](#4-configure-native-firebase-files "Permanent link") When you registered the Android and iOS apps in step 2, you had the option to download the native config files. Place `google-services.json` at `android/app/google-services.json` and `GoogleService-Info.plist` at `ios/App/App/GoogleService-Info.plist`, then run: `[](#%5F%5Fcodelineno-6-1)npx cap sync ` ## Integrate Firebase with Capacitor[¶](#integrate-firebase-with-capacitor "Permanent link") With your Firebase project ready, the next step is wiring it into the app. We use native Firebase plugins rather than the web SDKs, which gives us better reliability inside the WebView, native file upload paths, and noticeably better performance with large files. To install them, see the [Installation](/docs/sdks/capacitor/firebase/cloud-firestore/#installation) section of the Firebase Cloud Firestore plugin and the [Installation](/docs/sdks/capacitor/firebase/cloud-storage/#installation) section of the Firebase Cloud Storage plugin. ## Adding Native Features[¶](#adding-native-features "Permanent link") The demo app includes a couple of native feature touchpoints to make the migration realistic. ### Profile Picture Upload[¶](#profile-picture-upload "Permanent link") On the profile screen, users can update their profile picture by taking a photo or picking one from the gallery. The Angular UI stays exactly the same — the [Camera](https://capacitorjs.com/docs/apis/camera) plugin from the Capacitor team takes care of calling the native camera on iOS and Android, and ships a web fallback so the same code path works in the browser too. ![Capacitor Camera Plugin Example](/docs/assets/images/screenshots/capacitor-camera-plugin.png) Upload Profile Picture ### Expense Attachment Flow[¶](#expense-attachment-flow "Permanent link") When creating an expense, users can attach a receipt image or PDF. Three plugins work together for this flow: the [Capacitor File Picker plugin](/docs/sdks/capacitor/file-picker/) handles native file selection, the [Capacitor File Compressor plugin](/docs/sdks/capacitor/file-compressor/) shrinks images before upload, and the [Capacitor Firebase Cloud Storage plugin](/docs/sdks/capacitor/firebase/cloud-storage/) uploads the result on device. All of the related code lives in `src/app/core/services/storage.service.ts`. ![Capacitor File Picker Example](/docs/assets/images/screenshots/capacitor-file-picker.png) File Picker For a deeper look at file handling on Capacitor — including memory pitfalls and best practices — see [Capacitor File Handling: The Complete Guide](/blog/capacitor-file-handling-guide/). That covers everything needed to bring your Angular app to mobile. The rest is just Angular and Ionic UI to build out your product. ## Production Delivery with Capawesome Cloud[¶](#production-delivery-with-capawesome-cloud "Permanent link") Once the app runs reliably on real devices, the next step is automating delivery. Capawesome Cloud handles the parts that would otherwise eat your time: [Native Builds](/docs/cloud/native-builds/setup/) produces reproducible iOS and Android binaries in a consistent environment, [Live Updates](/docs/cloud/live-updates/setup/) ships fixes and improvements to the web layer without going through app store review every time, and [App Store Publishing](/docs/cloud/app-store-publishing/) delivers builds straight to TestFlight or Google Play. A pattern that works well in practice is combining the two release tracks — ship stable native builds through the stores, and use Live Updates for fast iteration on the web layer in between. Wire it all into your repo with the [GitHub integration](/docs/cloud/integrations/github/) and your pipeline triggers builds and deployments automatically on commit, branch, or tag. [ ![Build and deploy your Capacitor app with Capawesome Cloud](https://capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.png?t=1) ](https://capawesome.io/) See the [Capawesome Cloud documentation](/docs/cloud/) for setup details, or browse the [video walkthroughs](https://www.youtube.com/@capawesomeio) for each step. ## FAQ[¶](#faq "Permanent link") ### Do I need Ionic to wrap an Angular app with Capacitor?[¶](#do-i-need-ionic-to-wrap-an-angular-app-with-capacitor "Permanent link") No — Ionic is entirely optional. Capacitor itself only wraps your web build into a native shell; Ionic just adds a mobile UI component library and app-like UX patterns on top. If your Angular app already has its own design system, you can add Capacitor directly without introducing Ionic at all. ### Why use native Firebase plugins instead of the Firebase Web SDK, since the app already runs Angular?[¶](#why-use-native-firebase-plugins-instead-of-the-firebase-web-sdk-since-the-app-already-runs-angular "Permanent link") For reliability and performance inside the WebView, not just convenience. The native Firebase plugins give more reliable behavior than the Firebase JS SDK running inside a mobile WebView, native file upload paths, and noticeably better performance with large files — the trade-off is installing platform-specific plugins instead of a single web-only SDK. ### After wrapping my app, do web deploys still work the same way?[¶](#after-wrapping-my-app-do-web-deploys-still-work-the-same-way "Permanent link") No — releases now go through the native app store workflow instead of a simple web deploy. Your Angular code still powers the UI, but shipping a change to users means either a native build submission (for native-layer changes) or a Live Update (for web-layer-only changes), rather than just deploying updated static assets to a web server. ### Does wrapping the app change how file paths work in my Angular code?[¶](#does-wrapping-the-app-change-how-file-paths-work-in-my-angular-code "Permanent link") Yes — this is one of the more common surprises. Once running inside a native WebView, native path schemes like `file://` and `content://` enter the picture, which web-only Angular code typically never has to handle. Memory constraints also matter more on-device than in a desktop browser tab, so file-heavy flows (like the receipt attachment feature in this guide) need to account for both. ### Can I add native plugins gradually, or do I have to wire up every capability before shipping?[¶](#can-i-add-native-plugins-gradually-or-do-i-have-to-wire-up-every-capability-before-shipping "Permanent link") Gradually — that's the intended workflow, not a limitation. Since your Angular code keeps driving the UI and business logic, you can ship an initial wrapped version with minimal native touchpoints and add plugins (camera, file picker, push notifications, biometrics) over time as you need them, rather than front-loading every native integration before your first release. ## Related Posts[¶](#related-posts "Permanent link") * [Firebase Firestore Plugin for Capacitor](/blog/announcing-the-capacitor-firebase-cloud-firestore-plugin/) * [What's New in Capacitor Firebase 8.3.0](/blog/capacitor-firebase-8-3-0-release/) ## Try Capawesome Cloud[¶](#try-capawesome-cloud "Permanent link") Stop fighting with manual builds and slow release cycles. Capawesome Cloud handles native builds, live updates, and app store publishing for your Capacitor apps in one place. [Try Capawesome Cloud Free](https://capawesome.io) ## Conclusion[¶](#conclusion "Permanent link") Wrapping an Angular app for iOS and Android with Capacitor isn't a rewrite — it's an extension of what you already have. Your Angular code keeps powering the UI and business logic; you just add native capabilities where they matter and ship through the regular app store workflow. This means your team can move faster, reduce duplication, and ship features consistently across web, iOS, and Android without the overhead of maintaining separate apps. Once you have this setup in place, you can start extending your app with more advanced features, such as adding [push notifications](/blog/capacitor-push-notifications-guide/) to keep users engaged, implementing [in-app purchases](/blog/tips-for-setting-up-in-app-purchases-with-capacitor/) to monetize your app, or building secure authentication flows using [OAuth](/docs/sdks/capacitor/oauth/) and [biometrics](/blog/exploring-the-capacitor-biometrics-api/). For a deeper look at how to roll out updates safely once you're in production, see [Capacitor App Updates: The Complete Guide](/blog/capacitor-app-update-guide/). Your app is wrapped — but getting it into the stores involves a few more steps. For a complete walkthrough covering developer accounts, certificates, builds, store listing, and Live Updates setup, see [From Web App to App Store: The Complete Guide](/blog/11-steps-to-get-your-web-app-on-the-app-store/). If you're coming from an AI app builder rather than a hand-written codebase, the beginner-friendly [Convert Your Lovable App to iOS & Android Apps](/blog/convert-lovable-app-to-mobile-app/) follows the same path end to end. If you have questions, join the [Capawesome Discord server](https://discord.gg/VCXxSVjefW) and connect with the community. To stay up to date on the latest news, subscribe to the [Capawesome newsletter](https://capawesome.io/newsletter/). July 17, 2026 Back to top ```json { "@context": "https://schema.org", "@type": "BlogPosting", "headline": "How to Wrap an Angular App with Capacitor and Firebase", "description": "Step-by-step guide to wrap an existing Angular web app into a native iOS and Android app using Capacitor, Ionic, and Firebase.", "image": "https://capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.png", "datePublished": "2026-04-27T00:00:00+00:00", "dateModified": "2026-07-17T00:00:00+00:00", "author": [ { "@type": "Person", "name": "Dayana Jabif", "url": "https://github.com/djabif" } ], "publisher": { "@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": { "@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg" } }, "articleSection": "Capacitor", "keywords": ["Capacitor", "Firebase", "Guides"], "isPartOf": { "@type": "Blog", "@id": "https://capawesome.io/blog/#blog" }, "mainEntityOfPage": "https://capawesome.io/blog/how-to-wrap-an-angular-app-with-capacitor-and-firebase/", "url": "https://capawesome.io/blog/how-to-wrap-an-angular-app-with-capacitor-and-firebase/" } { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://capawesome.io/" }, { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://capawesome.io/blog/" }, { "@type": "ListItem", "position": 3, "name": "How to Wrap an Angular App with Capacitor and Firebase", "item": "https://capawesome.io/blog/how-to-wrap-an-angular-app-with-capacitor-and-firebase/" } ] } {"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "What Is Capacitor?", "acceptedAnswer": {"@type": "Answer", "text": "Capacitor is an open-source runtime developed by the Ionic team that lets you run your web app as a native iOS and Android app. It wraps your built web assets in a native shell, so your Angular code still powers the UI and business logic. You keep a single codebase for most features, access native device APIs through plugins as you need them, and ship updates through the standard app store workflow — adding native capabilities progressively over time."}}, {"@type": "Question", "name": "What Is a Capacitor Plugin?", "acceptedAnswer": {"@type": "Answer", "text": "A Capacitor plugin is the bridge between your TypeScript code and native iOS and Android APIs. It typically ships a TypeScript API along with native iOS and Android implementations, plus an optional web implementation so the same code path works in the browser. In this project, that means using native integrations where they matter most — camera, file picking, Firebase on device — while keeping a single Angular codebase."}}, {"@type": "Question", "name": "Is Ionic Required?", "acceptedAnswer": {"@type": "Answer", "text": "No, Ionic is optional. It's a mobile UI toolkit that gives you production-ready components and app-like UX patterns out of the box, but if your team already has a design system, you can use Capacitor with plain Angular."}}, {"@type": "Question", "name": "Do I need Ionic to wrap an Angular app with Capacitor?", "acceptedAnswer": {"@type": "Answer", "text": "No — Ionic is entirely optional. Capacitor itself only wraps your web build into a native shell; Ionic just adds a mobile UI component library and app-like UX patterns on top. If your Angular app already has its own design system, you can add Capacitor directly without introducing Ionic at all."}}, {"@type": "Question", "name": "Why use native Firebase plugins instead of the Firebase Web SDK, since the app already runs Angular?", "acceptedAnswer": {"@type": "Answer", "text": "For reliability and performance inside the WebView, not just convenience. The native Firebase plugins give more reliable behavior than the Firebase JS SDK running inside a mobile WebView, native file upload paths, and noticeably better performance with large files — the trade-off is installing platform-specific plugins instead of a single web-only SDK."}}, {"@type": "Question", "name": "After wrapping my app, do web deploys still work the same way?", "acceptedAnswer": {"@type": "Answer", "text": "No — releases now go through the native app store workflow instead of a simple web deploy. Your Angular code still powers the UI, but shipping a change to users means either a native build submission (for native-layer changes) or a Live Update (for web-layer-only changes), rather than just deploying updated static assets to a web server."}}, {"@type": "Question", "name": "Does wrapping the app change how file paths work in my Angular code?", "acceptedAnswer": {"@type": "Answer", "text": "Yes — this is one of the more common surprises. Once running inside a native WebView, native path schemes like file:// and content:// enter the picture, which web-only Angular code typically never has to handle. Memory constraints also matter more on-device than in a desktop browser tab, so file-heavy flows (like the receipt attachment feature in this guide) need to account for both."}}, {"@type": "Question", "name": "Can I add native plugins gradually, or do I have to wire up every capability before shipping?", "acceptedAnswer": {"@type": "Answer", "text": "Gradually — that's the intended workflow, not a limitation. Since your Angular code keeps driving the UI and business logic, you can ship an initial wrapped version with minimal native touchpoints and add plugins (camera, file picker, push notifications, biometrics) over time as you need them, rather than front-loading every native integration before your first release."}}], "url": "https://capawesome.io/blog/how-to-wrap-an-angular-app-with-capacitor-and-firebase/"} ```