{"id":692,"date":"2020-11-11T15:27:25","date_gmt":"2020-11-11T14:27:25","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=692"},"modified":"2020-11-12T11:03:13","modified_gmt":"2020-11-12T10:03:13","slug":"how-to-create-an-android-app-from-angular-2","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/11\/11\/how-to-create-an-android-app-from-angular-2\/","title":{"rendered":"How to create an Android APP from Angular 2+"},"content":{"rendered":"\n<p>In this article, I am going to show you how to create an android APP from angular using  Angular2+ using Cordova.<\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-red-color\">step 1<\/span><\/h4>\n\n\n\n<p>first, create an angular app<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng new android-tutorial<\/code><\/pre>\n\n\n\n<p>then your project look like this<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/391\/1*gwFioONQUj6nPr7WLe78ng.png\" alt=\"Image for post\" width=\"294\" height=\"484\"\/><\/figure>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-red-color\">Step 2<\/span><\/h4>\n\n\n\n<p>install\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/developer.android.com\/studio\/install\" target=\"_blank\">Android Studio<\/a> : (https:\/\/developer.android.com\/studio)<\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-red-color\">Step 3<\/span><\/h4>\n\n\n\n<p>install Cordova plugin using npm<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g cordova<\/code><\/pre>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-red-color\">Step 4<\/span><\/h4>\n\n\n\n<pre id=\"tw-target-text\" class=\"wp-block-preformatted\">Creates a new Cordova project<\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>cordova create hello-app-world-cordova com.example.hello OurFirstApp<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/235\/1*xjHUOPihDuzzx_wKMcSPGQ.png\" alt=\"Image for post\" width=\"239\" height=\"254\"\/><\/figure>\n\n\n\n<p>the Cordova project look like above<\/p>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-red-color\">Step 5<\/span><\/strong><\/h4>\n\n\n\n<pre id=\"tw-target-text\" class=\"wp-block-preformatted\">Add the target platform to your mobile app in the newly created Cordova project.<\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>cordova platform add android<\/code><\/pre>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-red-color\">Step 6<\/span><\/h4>\n\n\n\n<p>copy all the folder and files except\u00a0<strong>package.json<\/strong>, <em>\u00a0package-lock.json<\/em>\u00a0and\u00a0<em>node_modules<\/em>\u00a0,\u00a0from Cordova project to your angular project. result folder structure photo will look like below<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/449\/1*jezrp9cEb1TASqSms7CsTQ.png\" alt=\"Image for post\" width=\"367\" height=\"476\"\/><\/figure>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-red-color\">Step 7<\/span><\/strong><\/h4>\n\n\n\n<p>merge\u00a0<strong>Cordova<\/strong>\u00a0project\u00a0<em>package.json\u00a0<\/em>to\u00a0<strong>angular<\/strong>\u00a0project\u00a0<em>package.json<\/em>:<\/p>\n\n\n\n<ul><li>Overwrites the name of the Angular package.json with the name of the Cordova package.json. <\/li><li><span class=\"has-inline-color has-vivid-red-color\"><em>You do not have to copy the script object of the Cordova package.json into the Angular package.json.<\/em><\/span><\/li><\/ul>\n\n\n\n<p> the resulting package.json file looks like below<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/842\/1*zKgpD3Uc0XLqDf79w0FLxQ.png\" alt=\"Image for post\" width=\"529\" height=\"561\"\/><\/figure>\n\n\n\n<p>Ps: Notice that we make change on the bottom file . we have added new dev-dependencies from cordova plugin. <\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-red-color\">Step 8<\/span><\/h4>\n\n\n\n<p><br>Opens the index.html of the Angular project and changes the base href from &lt;base href = \u201d\/\u201d> to:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;base href=\u201d.\/\u201d><\/code><\/pre>\n\n\n\n<p>move or copy  the meta &amp; script Tag, from\u00a0<strong>www\/index.html<\/strong>\u00a0content to<strong>\u00a0src\/index.html.\u00a0<\/strong> <\/p>\n\n\n\n<p>Now your\u00a0<em>src\/index.html<\/em>\u00a0look like this<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/1274\/1*lNLUoFP0-84HRwTMFXYdjA.png\" alt=\"Image for post\" width=\"503\" height=\"364\"\/><\/figure>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-red-color\">Step 9<\/span><\/strong><\/h4>\n\n\n\n<p>now in angular.json change \u201coutputPath\u201d: \u201cdist\/android-tutorial\u201d to \u201coutputPath\u201d: \u201cwww\u201d, because Cordova need build here<\/p>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-red-color\">Step 10<\/span><\/strong><\/h4>\n\n\n\n<p>Generate production build<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng build --prod<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/374\/1*nDYnjvIGvrrLzMSb0BOWzw.png\" alt=\"Image for post\"\/><\/figure>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-red-color\">Step 11<\/span><\/strong><\/h4>\n\n\n\n<p><strong>www\/index.html<\/strong>&nbsp;file look like this and copy the<strong>&nbsp;js\/index.js<\/strong>&nbsp;folder from&nbsp;<strong>cordava\/www<\/strong>&nbsp;project to angular&nbsp;<strong>www\/<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/1320\/1*E8ZjPthnfAY5F0KhLVCCSA.png\" alt=\"Image for post\" width=\"588\" height=\"337\"\/><\/figure>\n\n\n\n<p><em><span class=\"has-inline-color has-vivid-red-color\">PS: and do not forgetto  add&nbsp;<strong>type=\u201dtext\/javascript\u201d&nbsp;<\/strong>to all script tag otherwise you will get file:\/\/\/ null cross error something<\/span><\/em><\/p>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-red-color\">Step 12<\/span><\/strong><\/h4>\n\n\n\n<p> Let us build android apk from&nbsp;<strong>www<\/strong>&nbsp;folder content. To do so , first make sure you installed android studio, and java kit development (jdk8) to <strong>1.8&nbsp;<\/strong>version. <\/p>\n\n\n\n<p>Then set corresponding environment variables:&nbsp;<strong>JAVA<\/strong>&nbsp;<strong>,<\/strong>&nbsp;<strong>ANDROID_HOME<\/strong> ,&nbsp;<strong>tools<\/strong>&nbsp;and&nbsp;<strong>platform-tool&nbsp;<\/strong>in your system env files&nbsp;<strong>~\/.profile<\/strong>&nbsp;or&nbsp;<strong>~\/.bashrc<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i.stack.imgur.com\/ZG576.png\" alt=\"enter image description here\"\/><\/figure>\n\n\n\n<p>Let us build android apk from&nbsp;<strong>www<\/strong>&nbsp;folder content, to do so run below command<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cordova build android<\/code><\/pre>\n\n\n\n<pre id=\"tw-target-text\" class=\"wp-block-preformatted\">If you work with an Angular Version over 8, you still have to change the Compile Target to es5 (ES5) in tsconfig.json.<\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\"target\": \"es5\"<\/code><\/pre>\n\n\n\n<pre id=\"tw-target-text\" class=\"wp-block-preformatted\">(Because Angular over version 8 compiled by default for ES6 (es2015), but Android emulators have problems with ES6)<\/pre>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-red-color\">Step 13<\/span><\/strong><\/h4>\n\n\n\n<pre id=\"tw-target-text\" class=\"wp-block-preformatted\">Now your APK is ready for testing. However, we need a running virtual Android device. To do this, open Android Studio. Now open the Android Virtual Device Manager. Create a new virtual device (hardware and Android version as you like) and start the device. As soon as the virtual device has booted, you can start the test APK in the Angular directory.<\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>cordova emulate android<\/code><\/pre>\n\n\n\n<pre id=\"tw-target-text\" class=\"wp-block-preformatted\">That's it. Now your Angular project should start as an app on the virtual device.<\/pre>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/1080\/1*PhJCHSmWcfU03DJ_s9dzlA.jpeg\" alt=\"Angular 8 Android app icon\" width=\"382\" height=\"826\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/1080\/1*kYEH1rFPKk11wmvDihxC-Q.jpeg\" alt=\"Image for post\" width=\"342\" height=\"740\"\/><\/figure>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-cyan-blue-color\">Conclusion<\/span><\/strong><\/h4>\n\n\n\n<p>I showed you the simple steps to create an (unsigned) android app from angular. To publish to playstore, we have to generate the signed apk.<\/p>\n\n\n\n<p> We can build an ios app using Cordova build ios. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Next:  <a href=\"https:\/\/liechtenecker.at\/blog\/angular-zu-android-apk-in-10-schritten\/\"> how to create signed-app <\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, I am going to show you how to create an android APP from angular using Angular2+ using Cordova. step 1 first, create an angular app then your project look like this Step 2 install\u00a0Android Studio : (https:\/\/developer.android.com\/studio) Step 3 install Cordova plugin using npm Step 4 Creates a new Cordova project the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":700,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[133,40,141,135,136,134],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/692"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=692"}],"version-history":[{"count":10,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/692\/revisions"}],"predecessor-version":[{"id":1021,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/692\/revisions\/1021"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/700"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}