Are you trying to find a way to make your existing Angular application into a native mobile app without having to start from scratch with a new application? If so, you've come to the correct location. In this article, we have covered steps on how to convert an Angular app to a native mobile app. 

Things to Know

Before jumping on to the steps, let’s first know the environments you need to set up in your system. The below are dependencies to look out for. 

Nodejs:>> >https://nodejs.org/en/> 

Mobile development setup:>> >https://capacitorjs.com/docs/getting-started/environment-setup> 

Angular CLI:>> >https://angular.io/cli>  

What is Capacitor?

The capacitor is a cross-platform native runtime that allows developers to create secure, interactive web applications that are simple to use on both iOS and Android platforms. its features and functionalities, including support for PWA, multiple plugins, and Capacitor CLI. 

Visit the official page of >Capacitor for more information. 

Now that we are aware of the prerequisites for an Angular native application, it is time to move on to the process of converting the Angular application to an iOS or Android app. 

Step 1: Generate a new Angular app

We will convert the Angular project that has already been generated from the CLI, just to make things easier. 

ng new angular-mobile-app

In your system, the aforementioned CLI command will create and initialize a new Angular application. After app generation is complete, open the project directory and launch the development server with the following command. 

cd angular-mobile-app

ng serve  

After this, navigate to the browser and enter> http://localhost:4200/, this will lead you to the page given below. 

                                                     Source: betterprogramming.pub

Step 2: Add a Capacitor to your Angular project 

The @capacitor/cli and @capacitor/core dependencies need to be installed now that the web application is up and running. To install both dependencies, execute the given command. 

cd angular-mobile-app

npm install @capacitor/core

npm install @capacitor/cli

Step 3: Execute the config file of the capacitor

After installing the capacitor dependencies, create the capacitor.file.ts files by running the following command. 

npx cap init

CLI will ask you a standard application-related question on a new page that opens. Proceed to the following step and leave everything as it is. 

                                               Source: betterprogramming.pub

The generated capacitor-configured file will look like the below image. 

                                              Source: betterprogramming.pub

appId: This demonstrates the unique identifier of a packaged application. 

webDir: It is the directory where all your web assets files are compiled.

appName: This will demonstrate your application’s name. 

bundledWebRuntime: This demonstrates whether the Capacity runtime bundle can be copied or not. 

Note: It is important to change the webDir value to dist/(your app name) because it is the usual build path for an Angular application. It will help the capacitor to find the web assets. 

Step 4: Add Android packages and native iOS

The next step includes the installation according to the packages for Android and iOS and adding up the native projects by the below commands. 

npm install @capacitor/ios @capacitor/android

npx cap add ios

npx cap add android

As you run the above-mentioned CLI commands, two folders will be created for both iOS and Android. 

                                         Source: betterprogramming.pub

Step 5: Build an application

Now, it's time to build an Angular native mobile app whether you want to build it for Android or iOS. Use the below command and build an Angular app and sync it with iOS or Android projects. 

ng build --prod

npx cap sync

npx cap sync this command will copy the build folder in the Android or iOS project. 

Step 6: Open Xcode or Android Studio

Now, after building and syncing the Angular app to the native mobile app, you need to open the mobile project in Xcode or Android Studio. The following command will help you to do so. 

npx cap open ios

npx cap open android

Note: First set up an>> >Android Studio environment or Xcode before executing the above command.  

After setting up the Android Studio or Xcode, use any of these two environments and deploy your application. You can do that directly or by connecting a device or a virtual device. 

You can use Android Studio and select Pixel 4 emulator as seen in the below image. 

                                              Source: betterprogramming.pub

Lastly, tap on ‘Run’ or ‘debug button’ to run your application. 

Step 7: Run your application

                                               Source: betterprogramming.pub

Final Thoughts

Capacitor is a powerful cross-platform to convert Angular apps to iOS or Android. This is the easiest and quickest way to convert an already Agular project APK into a native mobile application that you can run on your device. 

The best part is the codebase for various platforms that you can use to build an application without having to write code from scratch. This not only saves time and cost but also increases the productivity of software developers.  

Suggested blogs:

>Create a One Page App with Angular.js, Node.js and MongoDB

>Create a basic Web Application with Angular

>Setting up the local environment for Angular development

>Building a web application with Angular and Firebase

>How To Build Progressive Web Apps with Angular

>A complete guide on Life Cycle of Angular Component

>How to add a search filter inside the dropdown in AngularJS?

>A complete guide to Perform crud operation in angular using modal popup