How to Convert Your Angular Application to an Android App?

You can convert your existing Angular application to a mobile app without having to rewrite everything from scratch. We will be using Capacitor to achieve this.

I don't need to mention the prerequisites because this is an Angular to Android conversion. We need to have an Angular application to convert. However, keep in mind that you must have Android Studio installed on your computer.

Capacitor is a native mobile runtime for web applications, Capacitor allows developers to create mobile applications for both iOS and Android platforms by utilizing the web client code base.

Steps to convert Angular app to Android

  1. Add capacitor to the Angular project.
    @capacitor/angular are schematics for angular that allow to add Capacitor to an angular app in an easier way than manually.
    To add capacitor use the commands,
    npm install @capacitor/core
    npm install @capacitor/cli

  2. Setup the capacitor config file.
    npx cap init - This command will generate the capacitor.config.ts file.

    Capacitor prompts you for data such as app name, app id and web dir. If you are using an interactive terminal, you can provide these else you can just press enter and go forward.
    capacitor.config.ts file will have appId: '', appName: '', webDir: 'www'.

  3. Add Android packages
    In this step you are installing the packages for Android and then adding the native projects by running the commands below :

    npm install @capacitor/android
    npx cap add android
    After running these commands you will see a new folder 'andoid' in your solution explorer.

  4. Open Android Studio

    npx cap open android command will open the android studio. You can see the mobile view of your app in android studio's emulator.

  5. Build APK

    By using the Android studio you can build your apk by using the build section of the studio. After successful build, the studio will give us the location of the apk. You can go to the path, copy the apk and install it.