Skip to content

[Angular] Native iOS and Android App - Capacitor

Georg Höller
Georg Höller
3 min read
[Angular] Native iOS and Android App - Capacitor
Photo by Vojtech Bruzek / Unsplash

In this blog post we will go through the initial process of how to convert an existing angular project into a cross-platform project. Our focus is on iOS and Android.

In addition to this, I show you how to speed up developing and especially testing the app.


Test Project

(You can skip this section if you have your own project)

Head over to the Angular Tour of Heros page and download the example. Unpack it, open it with VS Code or any other IDE and install the node modules.

npm i

// At Angular 13 I ran in some errors with the current package.json
// just delete "angular-in-memory-web-api" and all "jasmine-x"
// references in the package.json file and you should be fine

Check if the app is buildable:

ng s 
// open your browser at http://localhost:4200/

Install Capacitor

Head over to the root of your angular application and install the packages.

npm i @capacitor/core
npm i @capacitor/cli --save-dev

The capacitor cli commands are very easy - we will start with initializing the config.

npx cap init

Afterwards, you will find a capacitor.config.ts file in the root of your project. It defines some basic app values. You will find the full property list here.

Add the packages for the platform you want to support.

npm install @capacitor/android
npm install @capacitor/ios

The following commands add an android and iOS folder to the root of your angular application. You can open this folders with Android Studio or Xcode.

npx cap add android
npx cap add ios

Speed Up Development

Normally, capacitor copies the content from the dist folder and pastes it into each platform folder. The phone will creates its own server and host these files on its own localhost. This is fine in production mode but when we are developing we want to see changes as fast as possible.

So we do not want to build the app first, sync it to the platform folder and rebuild it to see changes. We are used to the watch mode from angular.

Add the following to the capacitor config which we created with the npx cap init command.

const config: CapacitorConfig = {
  webDir: undefined,
  server: {
    url: 'http://<ipToYourAngularMachine>:4200',
    cleartext: true, //needed for android

When the url property is set, capacitor skips the creation of the own server and uses the url we specified instead.
This means the phone app will react the same way as on the computer browser. If you change code and save it, the app reloads and we see the changes immediately.

Android App

You will need Android Studio for this section, you can download it here.

As we have changed the capacitor config we have to sync the changes into the android folder.

npx cap sync android

You will find the android capacitor config here:

If they look the same, let's open up android studio. You can do this with the project picker from android studio or just type the following command.

npx cap open android

To access your angular app with a device within the network with your current IP, you have to use to following serve parameter.

ng s --host

Now you are ready to start the app with android studio on your phone or simulator.

If you don't want to open android studio, you can use this command to start the app.

npx cap run android

iOS App

You will need a Mac for this section. As I currently don't have one (waiting for M2) the tutorial could be missing something. But it is very similar to android so it should be alright.

Sync the capacitor config changes to the ios folder.

npx cap sync ios

Open the Xcode project.

npx cap open ios

The app should be buildable, select a simulator and start the app.
Don't forget to start the angular application.

ng s --host


Related Posts

Members Public

[Angular | Storybook] Tailwind, Directives, Content Projection, Icons and i18n

Install packages npm i -D @nx/storybook npm i -D @storybook/angular Create config nx g @nx/storybook:configuration <project-name> I created the config inside the main app to share some configs/modules. My stories are located at libs/shared/ui. That's why I had to

[Angular | Storybook] Tailwind, Directives, Content Projection, Icons and i18n
Members Public

[Angular | RxJS] BehaviorSubject with custom states

Whenever I call an api, often my frontend has to go through some different visualization steps. Imagine you have some kind of search input and a list which displays the results but you want to show an loading indicator, an error hint and something different when the result is empty.

[Angular | RxJS] BehaviorSubject with custom states
Members Public

[Angular] Dynamic App Config and Translations in a Submodule

When I'm setting up a new angular application, I always start with translation support and an external app config json loader. You should never start a new app without an internationalization (i18n) system - even if you only support one language! We are going to use the package

[Angular] Dynamic App Config and Translations in a Submodule