{"id":1941,"date":"2023-07-13T05:44:43","date_gmt":"2023-07-13T05:44:43","guid":{"rendered":"http:\/\/waqar-arshad.com\/?p=1941"},"modified":"2023-07-13T18:37:06","modified_gmt":"2023-07-13T18:37:06","slug":"build-a-mobile-native-app-from-angular-projects-with-capacitor","status":"publish","type":"post","link":"http:\/\/waqar-arshad.com\/index.php\/2023\/07\/13\/build-a-mobile-native-app-from-angular-projects-with-capacitor\/","title":{"rendered":"Build a Mobile Native App from Angular Projects with \u201cCAPACITOR\u201d"},"content":{"rendered":"<div class=\"pld-like-dislike-wrap pld-template-1\">\r\n    <div class=\"pld-like-wrap  pld-common-wrap\">\r\n    <a href=\"javascript:void(0)\" class=\"pld-like-trigger pld-like-dislike-trigger  \" title=\"\" data-post-id=\"1941\" data-trigger-type=\"like\" data-restriction=\"cookie\" data-already-liked=\"0\">\r\n                        <i class=\"fas fa-thumbs-up\"><\/i>\r\n                <\/a>\r\n    <span class=\"pld-like-count-wrap pld-count-wrap\">    <\/span>\r\n<\/div><div class=\"pld-dislike-wrap  pld-common-wrap\">\r\n    <a href=\"javascript:void(0)\" class=\"pld-dislike-trigger pld-like-dislike-trigger  \" title=\"\" data-post-id=\"1941\" data-trigger-type=\"dislike\" data-restriction=\"cookie\" data-already-liked=\"0\">\r\n                        <i class=\"fas fa-thumbs-down\"><\/i>\r\n                <\/a>\r\n    <span class=\"pld-dislike-count-wrap pld-count-wrap\"><\/span>\r\n<\/div><\/div>\n<h1 class=\"wp-block-heading\">Native Mobile App from Angular<\/h1>\n\n\n\n<p>The popularity of Capacitor is constantly rising and given the fact that you can turn basically any web project into a native mobile app with Capacitor is the simple reason for Capacitors fame.<\/p>\n\n\n\n<p>So how can we&nbsp;<strong>transform a web project<\/strong>&nbsp;that\u2019s using Angular&nbsp;<strong>into a native mobile app<\/strong>?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"665\" src=\"http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-1.png\" alt=\"\" class=\"wp-image-1942\" srcset=\"http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-1.png 940w, http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-1-300x212.png 300w, http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-1-768x543.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<p>Looking for a way to convert your existing Angular application to a mobile app without having to rewrite everything from scratch? Well, you came to the right place. In this article, we will be using&nbsp;<a href=\"https:\/\/capacitorjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Capacitor&nbsp;<\/a>to achieve that.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Prerequisites<\/h1>\n\n\n\n<p id=\"91b4\">Before we start, make sure to set up your environment by installing below dependencies:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nodejs :&nbsp;<a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/nodejs.org\/en\/<\/a><\/li>\n\n\n\n<li>Angular CLI:&nbsp;<a href=\"https:\/\/angular.io\/cli\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/angular.io\/cli<\/a><\/li>\n\n\n\n<li>Mobile development setup:&nbsp;<a href=\"https:\/\/capacitorjs.com\/docs\/getting-started\/environment-setup\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/capacitorjs.com\/docs\/getting-started\/environment-setup<\/a><\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">What is Capacitor?<\/h1>\n\n\n\n<p>Capacitor is a cross-platform native runtime to build modern web apps that can run natively on iOS or Android with ease. It offers cool features like PWA support, Capacitor CLI, and awesome plugins.<\/p>\n\n\n\n<p><a href=\"https:\/\/capacitorjs.com\/docs\" target=\"_blank\" rel=\"noreferrer noopener\">Check out the docs to learn more<\/a>.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">1 \u2014 Generate a new angular application<\/h1>\n\n\n\n<p id=\"2b68\">For the sake of simplicity, we will just convert the generated angular project from the CLI.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ng new angular-mobile-app<\/pre>\n\n\n\n<p id=\"d608\">The above CLI command will create and initialize a new Angular application out of the box.<\/p>\n\n\n\n<p id=\"fe7a\">When the generation finishes, navigate to the project directory and type the following command to start the dev server:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cd angular-mobile-app<br>\nng serve<\/pre>\n\n\n\n<p id=\"e903\">&nbsp;<\/p>\n\n\n\n<p>Now, go to your browser and type&nbsp;<em><a href=\"http:\/\/localhost:4200\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/localhost:4200<\/a><\/em>&nbsp;, you should be seeing the page below if everything went well.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">2 \u2014 Add Capacitor to your project<\/h1>\n\n\n\n<p id=\"5998\">Now that we have a web app up and running, the next step is to install both&nbsp;@capacitor\/core&nbsp;and&nbsp;@capacitor\/cli&nbsp;dependencies by running the following npm commands :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cd angular-mobile-app<br>\nnpm install @capacitor\/core<br>\nnpm install @capacitor\/cli<\/pre>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"2248\">3 \u2014 Setup the capacitor config file<\/h1>\n\n\n\n<p id=\"2991\">After installing the capacitor dependencies, run the following command to generate the&nbsp;capacitor.config.ts&nbsp;file :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npx cap init<\/pre>\n\n\n\n<p id=\"460c\">&nbsp;<\/p>\n\n\n\n<p>The CLI will ask you some general questions about the app. Just leave everything as default for now.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"215\" src=\"http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-2.png\" alt=\"\" class=\"wp-image-1943\" srcset=\"http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-2.png 940w, http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-2-300x69.png 300w, http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-2-768x176.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<p id=\"810f\">\u00a0import { CapacitorConfig } from &#8216;@capacitor\/cli&#8217;;<br>const config: CapacitorConfig = {<br>import { CapacitorConfig } from &#8216;@capacitor\/cli&#8217;;<br>const config: CapacitorConfig = {<br><br>\u00a0 appId: &#8216;com.example.app&#8217;,<br><br>\u00a0 appName: &#8216;angular-mobile-app&#8217;,<br><br>\u00a0 webDir: &#8216;dist\/angular-mobile-app&#8217;,<br><br>\u00a0 bundledWebRuntime: false<br><br>};<br>export default config;<\/p>\n\n\n\n<p>The generated file will look something like this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>appId: The unique identifier of your packaged app.<\/li>\n\n\n\n<li>appName: the name of your app.<\/li>\n\n\n\n<li>webDir: The directory of your compiled web assets.<\/li>\n\n\n\n<li>bundledWebRuntime:Whether to copy the Capacitor runtime bundle or not.<\/li>\n<\/ul>\n\n\n\n<p id=\"3d55\">&nbsp;<\/p>\n\n\n\n<p>Note: Make sure to change the value of&nbsp;webDir&nbsp;to&nbsp;dist\/(your app name)&nbsp;since that is the usual build path for an Angular app. Now, capacitor will be able to find the web assets.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>4 \u2014 Add native iOS and Android packages<\/strong><\/h1>\n\n\n\n<p id=\"cc9a\">The next step is installing the according to packages for iOS and Android and then adding the native projects by running the commands below :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install @capacitor\/ios @capacitor\/androidnpx cap add iosnpx cap add android<\/pre>\n\n\n\n<p id=\"332d\">After running the above CLI commands, you should see two new folders created for both Android and iOS.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"547\" height=\"1024\" src=\"http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-3-547x1024.png\" alt=\"\" class=\"wp-image-1944\" srcset=\"http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-3-547x1024.png 547w, http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-3-160x300.png 160w, http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-3.png 718w\" sizes=\"auto, (max-width: 547px) 100vw, 547px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"3c89\"><\/h1>\n\n\n\n<p>5 \u2014 Build your app<\/p>\n\n\n\n<p id=\"76e5\">Let\u2019s now build our Angular app and sync the changes to the native Android\/iOS projects by running the below commands:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ng build --prodnpx cap sync<\/pre>\n\n\n\n<p id=\"60b8\"><code>npx cap sync<\/code>&nbsp;<\/p>\n\n\n\n<p>will copy the build folder in the iOS\/Android project.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>6 \u2014 Open Android studio or Xcode<\/strong><\/h1>\n\n\n\n<p id=\"8692\">You can directly open the mobile project on Android Studio or Xcode with the following command in your project:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npx cap open ios<br>\nnpx cap open android<\/pre>\n\n\n\n<p id=\"acf1\"><strong>Note:&nbsp;<\/strong>make sure you&nbsp;<a href=\"https:\/\/capacitorjs.com\/docs\/v3\/getting-started\/environment-setup\" target=\"_blank\" rel=\"noreferrer noopener\">set up your environment<\/a>&nbsp;first before executing the commands above.<\/p>\n\n\n\n<p id=\"8288\">Now the next step is to use Android Studio or Xcode to deploy your app directly to either a connected device or a virtual device.<\/p>\n\n\n\n<p id=\"7252\">In my case, I\u2019m using Android Studio. As you can see in the image below, I\u2019m selecting a Pixel 4 emulator.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"227\" src=\"http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-4.png\" alt=\"\" class=\"wp-image-1945\" srcset=\"http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-4.png 940w, http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-4-300x72.png 300w, http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-4-768x185.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<p>Finally, click the run or<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7 \u2014 Run the app!<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"422\" height=\"881\" src=\"http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-5.png\" alt=\"\" class=\"wp-image-1946\" srcset=\"http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-5.png 422w, http:\/\/waqar-arshad.com\/wp-content\/uploads\/2023\/07\/image-5-144x300.png 144w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/figure>\n\n\n\n<p>app running on a virtual android device<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Wrapping up<\/h1>\n\n\n\n<p id=\"bda2\">As you can see, Capacitor is very powerful at converting an existing angular application to a native mobile app.Having one codebase for multiple platforms is the ultimate skill to have these days in order for us to not only save time and money but also to boost productivity. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Native Mobile App from Angular The popularity of Capacitor is constantly rising and given the fact that you can turn basically any web project into a native mobile app with Capacitor is the simple reason for Capacitors fame. So how can we&nbsp;transform a web project&nbsp;that\u2019s using Angular&nbsp;into a native mobile app? Looking for a way [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[32,1],"tags":[],"class_list":["post-1941","post","type-post","status-publish","format-standard","hentry","category-good-to-know","category-uncategorized"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"http:\/\/waqar-arshad.com\/index.php\/author\/waqar_29_1\/"},"uagb_comment_info":4856,"uagb_excerpt":"Native Mobile App from Angular The popularity of Capacitor is constantly rising and given the fact that you can turn basically any web project into a native mobile app with Capacitor is the simple reason for Capacitors fame. So how can we&nbsp;transform a web project&nbsp;that\u2019s using Angular&nbsp;into a native mobile app? Looking for a way&hellip;","_links":{"self":[{"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/posts\/1941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/comments?post=1941"}],"version-history":[{"count":1,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/posts\/1941\/revisions"}],"predecessor-version":[{"id":1947,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/posts\/1941\/revisions\/1947"}],"wp:attachment":[{"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/media?parent=1941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/categories?post=1941"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/waqar-arshad.com\/index.php\/wp-json\/wp\/v2\/tags?post=1941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}