Async routes does not work when installing the app on an android device


I’m using async option in my routes.js like this:

    path: '/articulo/:articleId/',
    async: function (routeTo, routeFrom, resolve, reject) {
        // Router instance
        var router = this;

        // App instance
        var app =;

        // Show Preloader;

        // User ID from request
        var id = routeTo.params.articleId;

        app.request.get('' + id, function (res) {


            // Resolve route to load page
                        componentUrl: './pages/articulo.html',
                        context: {
                            data: res,

All is working fine while testing in browser. But when I use phonegap build, after uploading my app and installing it in an Android device this functionality doesn’t work. When I click a related link I can see the preloader, but then the app get locked.

Why it works in browser but not in a device? What can I do in order to see whats going on?


Do you see any error when you run the app in mobile?

No error is shown. Only I can see the preloader and the screen stays that way indefinitely.

Ok, so if the preloader its shown, it menas that f7 async route yts working fine.
you have this line nof code,

// Show Preloader;

and then AFTER the app.request.get you hide the preloader. Wich you say its never trigger


so my guess, with the code you shared, is that the problem is in the ajax call, no the router.

app.request.get(url, data, success, error, dataType)- Load data from the server using a HTTP GET request

url - string - Request url
data - object - A plain object or string that is sent to the server with the request. Optional
success - function (data, status, xhr) - A callback function that is executed if the request succeeds. Optional
error - function (xhr, status) - A callback function that is executed if the request fails. Optional
dataType - string - The type of data that you’re expecting back from the server. Could be text or json. Optional

so can you make a callback for error, and alert the result, maybe it gives you a hint of what is happening.

Yes, good idea. I’ll try!


I have implemented an error function:

function articuloError(err) {
    app.dialog.alert("status: " + err.status + "<br />statusText: " + err.statusText + "<br />response: " + err.response + "<br />responseText: " + err.responseText);

Running in browser all works fine, but an android device alerts:

status: 404 
statusText: Not Found 

What is it not found?!? my url is fine, using the device browser I navigate successfully to this url, so why is happening this error!?!?

Help please!

so there is your problem, 404 it means that cant find the server.

can you make an alert before the app.request, and show the full url, url + params. maybe is there the problem

I made that alert and it shows a valid url. I can navigate to it from device browser… :face_with_raised_eyebrow:

Hmm, without fiddling with the code i cannot say whats going on here.
Valid url AND params? or only valid url?

url and params. You can check this url:

can you try like this

app.request.get('', function (res) {

I guess the URL is blocked in android. Check whitelist config, cross-domain setting on server, or check if DNS from a browser on android device can resolve this URL. It’s not an error of F7.

Yes I tried thta. Same result.

I have tried changing the url to simply and same result

I have this in my config.xml:

<access origin="*" />

But reading here I thing I have to install cordova-plugin-whitelist.

I’m going to check that.

That is!

Installing cordoba-plugin-whitelist and configuring the config.xml now it works!


1 Like