CODEWITHSUNDEEP
angularcordova
Iva Pesa
Iva Pesa

Reputation: 47

Create a mobile app in angular and run it on android device with cordova and use cordova plugins

I want to create a hybrid app with angular and cordova so I followed this tutorial https://medium.com/@neridonk/create-a-mobile-app-in-angular-and-run-it-on-your-android-phone-with-cordova-5fe8a8adb598 and created a basic app. When I run 

       npm run start

the app runs on my android device but I can only see the output of cordova's project, not the angular output. If I modify the index.html of angular part of project, I continue to see only the cordova index.html.

I want to create an angular presentation view and use cordova's plugins in this kind of project, how can I achieve that?

Thanks

Angular index.html(I don't see this on device):

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Angular index</title>
    <base href="./">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
    <app-root>
       Hello world
    </app-root>
    </body>
    </html>

Cordova index.html (I can see this when run app on device):

    <!DOCTYPE html>

    <html>
    <head>

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 
     data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 
    'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="initial-scale=1, width=device-width, 
     viewport-fit=cover">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Hello World</title>
    </head>
    <body>
    <div class="app">
        <h1>Apache Cordova</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    </body>
    </html>

Upvotes: 0

Views: 1378

Answers (1)

Philip
Philip

Reputation: 678

I followed the steps in this youtube tutorial and made a Cordova app with plugins that wraps an Angular app. The main point in the video is to take the files from your Angular dist folder (see [rootfolder]/ClientApp/dist) and move them into your Cordova www folder. Also, when I did it I had to modify Angular dist index.html a little bit to make it work (i.e. changing type="module" to type="text/javascript"). Also needed to add a script to index.html

<script src="cordova.js" type="text/javascript"></script>

[UPDATE]

I realize now that I didn't actually use cordova plugins in my angular code, although it seems there is a way to do that (judging by a quick google search). All I did was add the cordova diagnostic plugin to the Cordova wrapper and then added a javscript file which I called permissions.js to my angular src/assets folder. Then in my index.html (in CordovaRoot/www) I ran the script with the code below.

  <script src="assets/permissions.js" type="text/javascript"></script>

Also, there seems to be a bug with using the angular router when it's wrapped by a Cordova app. But there is an easy albeit hacky fix in this blog.

Upvotes: 1

Related Questions