1

Background:

I've built a Angular Application that works fine on browsers. On the frontend side I have HTML/CSS/Angular/Bootstrap, backend side is Web API. So it is completely separated.

I took my front code zipped it, used Phonegap to build android app. When I run it I can see the first screen of my web site. I've confirmed that the angular code there works, cause I can see it filtered navigation based on the fact the user is not logged in. But when I try to go to any other page of my app I get an empty screen, so I tried to remotely debug it using PG remote debugger. Every time I try to load anything but my homepage I loose connection to my target. I haven't seen any JS errors in console.

This is the only thing in the logs: 

    "exception firing pause event from native"
    "exception firing resume event from native"

Is there some part of configuration that I missed that could cause this behavior, or is there another way I can debug this?

Icepick
  • 149
  • 1
  • 9
  • when u say it works on browser, are u using a local webserver, or can u just double click index.html and open in browser ? – krisrak Oct 29 '14 at 20:51
  • It works on local webserver. Back and front are working on different webservers. I see where are you getting at. It makes sense that the PATH/Routing will not work if I just open the file. The thing is I'm sure how PG works, I thought it emulated the webserver. I tried to solve the problem by adding a base href __ __ but neither helped. Although it does behave like nothing is found on address it is looking at, but no errors are thrown in the debugger. Am I missing a config file or something? – Icepick Oct 30 '14 at 09:50

1 Answers1

1

Since you are using angularJS, I'm guessing you are using a webserver locally to make the app run on your browser, so everything seem to work fine

Although PhoneGap uses a file server to run your app on WebView, which is similar to just opening the index.html on browser without webserver. Bottom line is if you can make your app work on desktop browser by just opening your index.html without webserver then it will work when u build as PhoneGap app.

You might run into Cross-Origin issues when testing your app on browser, this will happen if your app is making REST API calls or if you are loading angularJS templates from another .html file, these Cross-Origin restrictions are taken care in PhoneGap build. So when testing on local browser you might want to open Chrome with web security disabled.

If you have developed your app using a webserver to test, then you might have absolute URLs for loading assets or hrefs, you will have to change these to relative URL paths.

For example, change <a href="/#/next-page"> to <a href="#/next-page">, or <img src="/images/logo.png"> to <img src="images/logo.png">

Community
  • 1
  • 1
krisrak
  • 12,622
  • 3
  • 28
  • 45