How to Convert Angular App to Native App

Want to know how to easily turn your Angular applications into native mobile apps supporting both Android and iOS? Then, this is the tutorial for you.

We will in this tutorial show you how easy it is to make your Angular applications run natively on Android and iOS, all using Capacitor.

Table of Contents

Can Angular Be Used for Creating Native Mobile Apps?

I’ll answer the question straight away, YES!

Angular can be used for creating native mobile applications, both for Android and iOS. The framework we recommend for turning your existing Angular applications into native mobile apps is Capacitor. If you’re interested, you can find the official introduction for Capacitor over here.

Setting up the Environment

Before we even think about making an Angular application Android and iOS native, we need to have an Angular project in place. We will start by generating the default Angular application using the Angular CLI:

ng new my-native-app --minimal --routing=false --style=scss --force

You can now run your application if you want to make sure that the setup went well:

npm start

And if you visit http://localhost:4200, you should see something like this:

Example of how the generated Angular application looks like when you run it and visit the url in your browser

Add Capacitor to Your Angular Project

Now that we have our Angular project in place, the next step for us is to install Capacitor and generate the Capacitor config file. We will install Capacitor and generate the config file with the following command:

ng add @capacitor/angular

You will get the option to set the Package ID for your app. We’ll just press Enter and use the default name. If everything went well, you should see that the command has created a Capacitor config file:

setup angular capacitor and generate capacitor config file

Let’s build our application, which will put all the necessary files inside dist/my-native-app:

ng build

Install Android and iOS Native Platforms

In order to build our Angular application for Android and iOS, we need to install the native platform packages and set up their infrastructure. This is all easily accomplished by running the following commands:

npm i @capacitor/ios @capacitor/android
npx cap add android
npx cap add ios

You should now have these two folders in your project, where your application will be placed when built for that specific platform:

folder structure when adding capacitor native platforms

Building Your App For Android and iOS

Everything is now in place for building our Angular application for Android and iOS. Let’s build our app and sync it with the following commands:

ng build
npx cap sync

Running Your Native Angular Application

You can run your Angular application on a simulated Android or iOS device if you have Android Studio or Xcode installed on your local machine.

Run this command to run your Angular application on a simulated Android device:

npx cap open android

Run this command to run your Angular application on a simulated iOS device (like an iPhone or iPad):

npx cap open ios

Using Native APIs with Capacitor

Now when you have Capacitor setup for your Angular project, you can also utilize the native APIs available on Android and iOS. You can find the list of all available native API plugins in Capacitor here.

Here’s an example of how you can utilize the GPS of an Android or iOS device in your Angular code:

import { Component } from "@angular/core";
import { Geolocation, Position } from "@capacitor/geolocation";

@Component({
  selector: "app-root",
  template: `
    <!--The content below is only a placeholder and can be replaced.-->
    <div style="text-align:center" class="content">
      <h1>Welcome to {{ title }}!</h1>
    </div>
  `
})

export class AppComponent {
  title = "my-native-app";
  loc!: Position;
  
  async getCurrentPosition() {
    this.loc = await Geolocation.getCurrentPosition();
  }
}

app.component.ts

Note: In order to use the GPS functionality in your Angular application, you first need to install it with the command below:

npm i @capacitor/geolocation

Conclusion

Angular is a powerful framework for web development and together with Capacitor, it makes up a perfect combo. Setup Capacitor for your Angular projects and you now have one codebase supporting multiple platforms.

One of the greatest features of Capacitor is the possibility to utilize native APIs on Android and iOS devices.

Hope you enjoyed following this tutorial and found it useful!

Are you interested in learning more about web development? Check out our other articles here.