15 Replies Latest reply on Jul 9, 2017 6:28 AM by BumbuKhan

    How to run Angular2 run on PhoneGap?

    gunmanill

      I have an angular2 web application that works fine in browser. I would like to make the mobile app using phonegap or intel XDK, using my angular2 code. Well, I copied the code into phonegap project and on deviceReady event I make it load. But it seems that angular2 router doesn't work in this environment. All I could have is a blank page (my html "loading" was removed inside init directive, but nothing is rendered).

      Has anyone any suggestinons on how to make it work?

        • 1. Re: How to run Angular2 run on PhoneGap?
          philipw12907718 Level 1

          I am using angular 2 in phone gap and the router works fine. What do you mean "on deviceReady event I make it load?" Could you please be more descriptive, and maybe copy over the code that does this? Really, all you should need to do is add the script tag to the bottom of your angular app's index.html that references the javascript file that the cli creates for you, and use web pack or the like to build your dist folder for you in the proper format (config.xml in the root, and index.html inside root/www folder).

          • 2. Re: How to run Angular2 run on PhoneGap?
            gunmanill Level 1

            Here is my index.html file:

            <html>

                <head>

                    <base href="/">

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

                </head>

                <body>

                    <uiApp>

                        <div style="position:fixed;width:100%;top:50%;text-align:center;font-family:arial;margin-top:- 85px;line-height: 44px;">

                            <div style="font-size: 60px;">

                                <span style="color:#ffd300">Pin</span style="color:#425d70"><span>Job</span>

                            </div>

                            <div style="font-size: 14px;">Loading...</div>

                        </div>

                    </uiApp>

             

             

                    <script type="text/javascript" charset="utf-8">

                    document.addEventListener('deviceready', onDeviceReady, false);

                        window.mobileApp = true;

                  

                        function onDeviceReady(s) {

                      

                            var s = document.createElement('script');

                            s.async = true;

                            s.src = 'static/main.js';

                            document.body.appendChild(s);

                        };

                    </script>

                </body>

            </html>

             

            static/main.js - contains all the javascript code.

             

            I even tried to append code without deviceready event, nothing helps

            • 3. Re: How to run Angular2 run on PhoneGap?
              gunmanill Level 1

              One more update, I've found that my code is not loading and fires onerror event. So I copied all the code into index.html file into script tag. Here is what I've got:

              !photo_2016-12-16_01-20-11.jpg

               

              The texts are on russian, so don't mind. Here you can see the uiApp component was loaded, but the middle part, where I have the router-outlet directive has no output.

              • 4. Re: How to run Angular2 run on PhoneGap?
                philipw12907718 Level 1

                I had some issues with the router using <base href = "/">. Try instead <base href="./">

                • 5. Re: How to run Angular2 run on PhoneGap?
                  gunmanill Level 1

                  Unfortunatelly it didn't help.

                  • 6. Re: How to run Angular2 run on PhoneGap?
                    gunmanill Level 1

                    Maybe I should use other routes when I run app in phoneGap?

                    Here are my routes:

                     

                    ng.router.RouterModule.forRoot([

                            {

                                path: '',

                                pathMatch: 'full',

                                redirectTo: 'announcements'

                            },

                            {

                                path: 'announcements/:page',

                                component: uiAnnouncements

                            },

                            {

                                path: 'announcements',

                                component: uiAnnouncements

                            },

                            {

                                path: 'announcement/:id',

                                component: uiAnnouncement

                            },

                              .........

                     

                         {

                                path: '**',

                                redirectTo: 'announcements'

                            }

                        ])

                    • 7. Re: How to run Angular2 run on PhoneGap?
                      philipw12907718 Level 1

                      Your routes look fine to me. Nothing different than what we are doing. Have you tried for the heck of it just loading the app up front in the index.html instead of in the device ready? I would try that first. You can always wire your platformBrowserDynamic().bootstrapModule to fire on an event that you trigger from your phone gap device ready, or find another way to lazy load the app after if you need to (I am just loading mine up front, I haven't had any issue come up where Cordova wasn't setup before I needed it).

                      • 8. Re: How to run Angular2 run on PhoneGap?
                        gunmanill Level 1

                        Well I finally found mistake - it was in using foreign services in my code and they seems were not loaded at time, so angular crashed. Now my router is working, but there is another problem - it seems that cors requests are not working.

                         

                        And thanks for <base href="./"> advice, without it my scripts are not loaded.

                        • 9. Re: How to run Angular2 run on PhoneGap?
                          philipw12907718 Level 1

                          Ah yes, good old CORS. Whitelist is what you'll need to install and setup properly to get that stuff to work properly. Here is the URL with info on that: Whitelist - Apache Cordova

                           

                          *as a side note if you want to debug locally in chrome you will have to open securityless chrome in command line/terminal. Cordova apps are local, they have no origin so this issue doesn't happen in a build on a device, but if you locally host for debugging in browser you wind up with an origin and that's the only way I've found around it.

                          • 10. Re: How to run Angular2 run on PhoneGap?
                            gunmanill Level 1

                            Well, everything is fine now, except cookies. It seems that phonegap doesnt support it and my sessions are failed.

                            • 11. Re: How to run Angular2 run on PhoneGap?
                              kerrishotts Adobe Community Professional

                              Please see HTTP access control (CORS) - HTTP | MDN for handling cookies with CORS.

                              • 12. Re: How to run Angular2 run on PhoneGap?
                                gunmanill Level 1

                                Thanks for reply. Now I can get cookies, but can't access then, but now it doesn'r matter I used one to make xsrf protection, which is not nessessary on mobile app.

                                Another bad thing is that cookies seems not to be saved after exit from the app and my session destroys.

                                I'm I wight, I should use another sesion save method - provide it with the response and save it in localStorage?

                                • 13. Re: How to run Angular2 run on PhoneGap?
                                  johannes88

                                  Hi, i'm new on phonegap and angular 2. I understand how angular 2 works, i tried with Ionic 2, but i don't want to use ionic-tag. SO i decided to remove Ionic layer and goes directly with cordova/phonegap.

                                  I really can't figure out how to include the minimun of angular 2 framework. On Angular 2 doc they indicate to start from a "quickstart" sample, that create a standalone project.

                                  Now, on Phonegap i create a blank project, and i would like to integrate the basic of Angular 2, but i can't figured out which files and where I have to move from angular2-quickstart to phonegap-blank folder, and where i have to do "npm install" into phonegap project folder.

                                  • 14. Re: How to run Angular2 run on PhoneGap?
                                    krispaks

                                    Hi,

                                     

                                    will ng-upgrade work in phonegap?

                                     

                                    Regards!

                                    • 15. Re: How to run Angular2 run on PhoneGap?
                                      BumbuKhan

                                      Hi everyone, to make router work use this script instead of <base href='/'>

                                       

                                      <script>
                                        var baseHref = window.location.href.split('/');
                                        baseHref.pop();
                                        document.write('<base href="' + baseHref.join('/') + '/" />');
                                      </script>