Build a Native Mobile App Using Angular

We will build a native mobile application using Angular and Capacitor.

What is Capacitor ?

Capacitor is an open-source platform created by the team behind Ionic. It allows developers to build cross-platform mobile apps using web technologies like HTML, CSS, and JavaScript12.

Capacitor works by wrapping your web application in a native container, enabling it to run as a native app on iOS, Android, and even as a Progressive Web App (PWA). It provides a bridge between the web code and native functionality, allowing you to access native device features such as the camera, geolocation, and file system through JavaScript13.

Here are some key features of Capacitor:

• Cross-Platform: Build apps that run on iOS, Android, and the web with a single codebase.
• Native Access: Use native APIs and plugins to access device features.
• Modern Web Technologies: Leverage standard web technologies to build your app.
• Extensible: Create custom plugins to extend the functionality of your app

Prerequisites

Ensure that Node.js, Angular CLI, Capacitor Setup are installed.

Step 1: Create a New Angular Application

To kick things off, let’s generate a new Angular project using the CLI. Run the following command:

ng new angular-mobile-app

This command will set up a fresh Angular application.

Once the setup is complete, navigate to your project folder and start the development server:

cd angular-mobile-app
ng serve

Now, open your web browser and visit http://localhost:4200 to check if your app is running correctly.

Step 2: Install Capacitor

With your web app ready, it’s time to add Capacitor to your project. Execute the following commands:

cd angular-mobile-app
npm install @capacitor/core
npm install @capacitor/cli

Step 3: Initialize the Capacitor Configuration

Next, initialize Capacitor to create the configuration file:

npx cap init

You will be prompted to answer some basic questions about your app; you can keep the default settings for now.

Make sure to modify the webDir path to dist/angular-mobile-app, as this is the default build path for Angular applications.

Step 4: Add iOS and Android Support

Now, let’s install the required packages for iOS and Android and create the native projects:

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

These commands will generate folders for both Android and iOS within your project.

Step 5: Build Your Application

Now, build your Angular app and synchronize it with the native platforms using the following commands:

ng build --prod
npx cap sync

The npx cap sync command will copy the build files into the respective iOS and Android projects.

Step 6: Open Your Mobile Projects

You can open your mobile projects in Android Studio or Xcode using these commands:

npx cap open ios
npx cap open android

Before running these commands, ensure your environment is properly configured.

Once you’ve opened the project in your preferred IDE, you can deploy your app to a connected device or an emulator. For example, if you're using Android Studio, select your target device (like a Pixel 4 emulator) and hit the run or debug button.

Step 7: Launch Your App!

Finally, it’s time to run your application! Click the run button in your IDE, and watch your Angular app come to life as a mobile application.

By following these steps, you can efficiently convert your Angular application into a mobile app using Capacitor, allowing you to reach users on both iOS and Android platforms. Happy coding!

Comments

[alander carraro]

Hi, please I need some information. I have one Angular app, I do not use ionic because to convert to ionic it would be so hard. I need to comunicate to a native android app passing parameters. It is a sales screen in Angular, and when I confirm the sale, I need to open a SoftPos app (android) passing total value from the sale and 3 parameters more. Now I am using capacitor to try to comunicate to this app. I generated a plugin and in it I have a method to call another method in the android app generated with capacitor. But it does not work if I add methods inside the android app MainActivity.class. When I execute it, it shows me a white screen, and it should show my angular app. If I comment the code inside public class MainActivity extends BridgeActivity {, it works, but I can not comunicate with the SoftPos. Could you say me why it happens? Could you help with some information please.