11 Replies Latest reply on May 31, 2017 4:58 AM by shellys55427221

    Phonegap build port to cordova, best practice?

    shellys55427221

      I'm porting a large phonegap build project to angular 2. My client requires a single page app and their current architecture is not SPA. The app will run in the browser as well as android ARM devices. I have a small portion ported and running but want to check my approach with the community before I proceed farther. 

       

      I'm building using cordova cli. I'm directing my output to a cordova project. I'm using

      ng build --target=production --environment=prod --output-path cordova/www/ --base-href .

      to build.

       

      I have 2 questions.

       

      1) Is the crosswalk plugin required? If I don't use the plugin then even though the app runs in the browser on my mac, it never gets past the root component page in the android emulator. ie. stops at loading. There aren't any errors in logcat. Is everyone pretty much using crosswalk?

       

      2) I'm using cordova cli but I started with ionic 2. Ionic 2 put all my Angular 2 component css into a main.css file thus flattening the css structure which broke my Angular 2 project. Is there a compelling reason to use Ionic that I'm missing? I know they have UI components but I don't need those. My customer has a very locked down look and feel for which Angular 2 works really well.

       

      Regards,

      Shelly Scott-Nash

        • 1. Re: Phonegap build port to cordova, best practice?
          kerrishotts Adobe Community Professional

          The Crosswalk project has wrapped up; most modern devices have a reasonably good web view now. At this point, unless you need to support < 5, I wouldn't suggest adding Crosswalk to your project, since it won't be updated in the future.

           

          It would help to know what emulator(s) you've tried on -- If you're using Android 5+, you should be fine without Crosswalk.

           

          The advantage of Ionic is that it takes care of both its UI components /and/ Cordova interactions for you. If you're not using the Ionic components, though, using Angular 2 is fine. I would, however, suggest that you create some minor build automation (npm scripts are often sufficient) so that you can build your Cordova app with a single command.

          • 2. Re: Phonegap build port to cordova, best practice?
            shellys55427221 Level 1

            I used Marshmallow API 23 and a Tab A emulator.

            I found this blog a couple weeks ago.

            Creating an Apache Cordova app with Angular 2.

            It was very close to what I'm doing structurally and if you read the comments people were getting stuck on the loading page just as I was. A couple people fixed it by using crosswalk so I did that too and it worked.

             

            It also appears that the author had the source working at some point but now, later, as people try to replicate, they're having this issue.

             

            People also had base ref as / but I made sure I have . so I don't think it's that.

             

            I'm in the process of upgrading android studio and all my emulators so maybe it will work after potentially.

            • 3. Re: Phonegap build port to cordova, best practice?
              kerrishotts Adobe Community Professional

              It would help to see what errors, if any, are being generated in Chrome's inspector (chrome://inspect).

               

              Also, what does the index.html file in cordova/www look like (thinking mostly of the <head> portion)?

              • 4. Re: Phonegap build port to cordova, best practice?
                shellys55427221 Level 1

                Hello Kerri,

                I've updated Android Studio, the SDK, recreated the emulator. When I launched the emulator after the updates I got a QT lib issue, upon googling I did cordova platform update android@6.2.2 to correct. Was that the correct action to take?

                 

                I'm still running Marshmallow.

                When I run chrome://inspect/#devices with the apk that includes cross walk, I don't get any errors.

                 

                When I run the apk without crosswalk I get this error.

                Uncaught TypeError: Cannot read property 'apply' of undefined

                file:///android_asset/www/vendor.7187954445f1a9d64893.bundle.js

                 

                The index file that is generated by ng build --target=production --environment=prod --output-path cordova/www/ --base-href .

                is as follows

                 

                <!doctype html>

                <html>

                <head>

                  <meta charset="utf-8">

                  <title>Angular4test</title>

                  <base href=".">

                  <meta name="viewport" content="width=1024,height=768" />

                  <link rel="icon" type="image/x-icon" href="favicon.ico">

                <link href="styles.049f84d550475e045c8e.bundle.css" rel="stylesheet"/></head>

                <body class="intro"><!--[ngclass]="menu!=true ? 'general' : 'intro' "-->

                  <app-root>Loading...</app-root>

                <script type="text/javascript" src="inline.316bd9eaaf10a3c467c6.bundle.js"></script><script type="text/javascript" src="polyfills.2d45a4c73c85e24fe474.bundle.js"></script><script type="text/javascript" src="vendor.d4087e0113114db95d8d.bundle.js"></script><script type="text/javascript" src="main.00011ddeb96932559c0d.bundle.js"></script></body>

                </html>

                • 5. Re: Phonegap build port to cordova, best practice?
                  kerrishotts Adobe Community Professional

                  OK -- I'm going to suggest not using --prod for the time being so that we can get stack traces that mean something. An error pointing at your vendor bundle isn't terribly helpful on my side.

                   

                  Also, double check and make sure your Android's System Web View is up-to-date (should be updating from Play Store). If the version installed is older than what Crosswalk is providing that could explain things a bit.

                  • 6. Re: Phonegap build port to cordova, best practice?
                    shellys55427221 Level 1

                    Good point. Ok when I build not in production it breaks here.

                    /**

                    * @param {?} options

                    * @return {?}

                    */

                    function combine(options) {

                        return ((Object)).assign.apply(((Object)), [{}].concat(options));

                    }

                    It hits this break point 2x. It gets through the first time. It's being called from Webpack. The first time it hits the breakpoint, the options are hours, minutes, seconds, etc. The second time, options are undefined.

                     

                    I see that the cordova node modules are requiring it in.

                    /Users/shellys/Documents/Repos/angular4test/angular4test/node_modules/core-js/build/index. js:

                    /Users/shellys/Documents/Repos/angular4test/angular4test/node_modules/karma-webpack/lib/ka rma-webpack.js:

                    /Users/shellys/Documents/Repos/angular4test/angular4test/node_modules/stylus-loader/index. js:

                     

                    Looks like I have the latest

                    sudo npm view webpack version

                    2.5.1

                     

                    On the question about webview version. I need to confess I'm an angular dev and an iOS dev. Android and Cordova is not my forte but that's what my customer wants so I'm learning... so stupid question here...

                    I installed android studio and made an emulator. On that emulator there is a browser app with a version 6.0-######. There is NO system webview app. At all. It that my problem? Do I need to ask the customer what versions of webview they want to support and then download and test with that?

                     

                    Thanks btw - you have been extremely helpful.

                     

                    Shelly Scott-Nash

                    • 7. Re: Phonegap build port to cordova, best practice?
                      kerrishotts Adobe Community Professional

                      So, when the method fails on the second encounter, what's the entire stack trace? It might be helpful to post a screenshot of your debugging session here if you can. The stack trace should eventually (hopefully) get back into your own code at some point.

                       

                      Android Studio should let you make various emulators, including those based on Android 7 (API 25). It would be worth a try to use a newer version of Android to see if that gets your app going. That way you can narrow things down to the difference between API levels.

                       

                      As to the webview version -- on my real Android device (Nougat), under Settings > Device / Apps > Android System WebView is at version 58.0.3029.83. Nougat, by default, ties this to the currently installed version of Chrome, but this is adjustable using the Developer Options > WebView implementation.

                       

                      On my emulator version, Chrome is at 53.0.2785.135 (Chrome > Settings > About Chrome). There's a WebView Browser Tester app that's running 52.0.2743.100 -- and this is my guess as to which webview is running on my emulator.

                       

                      So getting version info is a bit painful... easiest thing to do would be to query your user agent during debugging. In the JS Console, type "navigator.userAgent" and check the output. Given this example "Mozilla/5.0 (Linux; Android 7.1.1; Android SDK built for x86 Build/NYC) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.135 Mobile Safari/537.36", we can see that the webview is Chrome at version 53.0.2785.135.

                       

                      Your users aren't apt to know any of this, and the chrome webview can be updated at any time, so it's not safe to rely on a particular version number. The reason I asked was to make sure that you weren't somehow running an an ancient version of a webview that might be giving you grief (especially if you were utilizing newer JavaScript features).

                       

                      Can you share the index.html file from your Cordova www directory? Or a link to your entire project (DM if you want).

                      • 8. Re: Phonegap build port to cordova, best practice?
                        shellys55427221 Level 1

                        Thanks for the navigator.userAgent thing.

                        I have

                        "Mozilla/5.0 (Linux; Android 6.0; Android SDK built for x86 Build/MASTER; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/44.0.2403.119 Safari/537.36"

                        on my emulator.

                        I'd like to update to a new version. Where does Google make that available for developers? I can access google play with my Mac but since I don't have a registered android device, it won't let me do anything. Nor do I see an option for downloading the apk even if I did.

                        Is there a Google hosted mirror somewhere for these APKs? Is there a secret club I need to join? A secret handshake? Magic riddle?

                        • 9. Re: Phonegap build port to cordova, best practice?
                          shellys55427221 Level 1

                          The index in <root>/src is

                          <!doctype html>

                          <html>

                          <head>

                            <meta charset="utf-8">

                            <title>Angular4test</title>

                            <base href="/">

                            <meta name="viewport" content="width=1024,height=768" />

                            <link rel="icon" type="image/x-icon" href="favicon.ico">

                          </head>

                          <body class="intro"><!--[ngclass]="menu!=true ? 'general' : 'intro' "-->

                            <app-root></app-root>

                          </body>

                          </html>

                           

                          The generated index in cordova/www is

                           

                          <!doctype html>

                          <html>

                          <head>

                            <meta charset="utf-8">

                            <title>Angular4test</title>

                            <base href=".">

                            <meta name="viewport" content="width=1024,height=768" />

                            <link rel="icon" type="image/x-icon" href="favicon.ico">

                          <link href="styles.f940d341cda68a67afac.bundle.css" rel="stylesheet"/></head>

                          <body class="intro"><!--[ngclass]="menu!=true ? 'general' : 'intro' "-->

                            <app-root></app-root>

                          <script type="text/javascript" src="inline.e499da3839e11a783524.bundle.js"></script><script type="text/javascript" src="polyfills.2d45a4c73c85e24fe474.bundle.js"></script><script type="text/javascript" src="vendor.d4087e0113114db95d8d.bundle.js"></script><script type="text/javascript" src="main.0a95d9093a3f06108184.bundle.js"></script></body>

                          </html>

                           

                          if updating the version of chrome on the emulator doesn't work then I'll gut the project and post the code. The content in the app is proprietary so I can't share it as it stands right now.

                           

                          Thanks again,

                          Shelly

                          • 10. Re: Phonegap build port to cordova, best practice?
                            kerrishotts Adobe Community Professional

                            So you can get a newer Android version by downloading the version corresponding to the SDK level you want. So there's an image for API level 25, 24, and so on. Make sure you download the Intel image (and download HAXM) -- the arm emulator is dead slow.

                             

                            Or, use Genymotion or similar utilities. Genymotion makes getting emulators really simple.

                             

                            As to updating the webview version itself, it's available via Google Play on real devices. I don't know that you can update it in an emulator image (haven't ever needed to try).

                             

                            That said, version 44 of Chrome is ancient. Definitely aim for a recent API level to get a recent version of Chrome.

                            • 11. Re: Phonegap build port to cordova, best practice?
                              shellys55427221 Level 1

                              I'm suspect you're correct. I removed crosswalk and am able to run just fine on the Nougat emulator. I'm going to have my customer try it on their devices, especially Marshmallow.