Steps to convert your Angular App to a Native Mobile

 Are you looking for steps to convert your current Angular application to a native mobile app without re-writing the whole application from scratch? If yes, then you have arrived at the right place. 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 native run time cross-platform to build an interactive and secure web application that can run on iOS and Android platforms easily. Its functionalities and features like Capacitor CLI, PWA supporters, and various plugins. 

For further details refer to Capacitor's official page. 

Now that we have understood the basic requirements for an Angular native app it's time to get to the steps to convert the Angular app to Android or iOS. 

Step 1: Generate a new Angular app

Just to make it easy, we will convert the already generated Angular project from the CLI. 

ng new angular-mobile-app

The above CLI command will build and initialize a new Angular app in your system. Once you finish the app generation, navigate to the project directory and use the following command to start the dev server. 

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 

Now that we have the web application and it's running, it’s time to install both @capacitor/cli and @capacitor/core dependencies. Run the following command to install both of the dependencies. 

cd angular-mobile-app

npm install @capacitor/core

npm install @capacitor/cli

Step 3: Execute the config file of the capacitor

Now that you have installed capacitor dependencies, run the following command to generate the capacitor.file.ts files. 

npx cap init

A new page will open and CLI will ask you a common question related to the application. Leave everything as default and move to the next step. 

                                               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 native mobile app, now you need to open mobile project in Xcode or Android Studio. The following command will help you to 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 environment 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.