Device Simulator - ionic

[Matt]

I cant work out where this bug goes in the forum... so here feels the closest.

I have a project that if I try to run in App Simulator (well i'm converting my app from kendo mobile back to ionic). 

The project loads correctly (first page), but after navigating to any view it goes blank.

This is the error it has (i had to turn on XHR requests to find a error):
GET unsafe:local://simulator/index.html net::ERR_UNKNOWN_URL_SCHEME

It has lots of successful requests getting all the views as specified in the router config ie.
XHR finished loading: GET "local://simulator/views/competition-list.html". ionic.bundle.js:17607
2015-02-26 23:47:48.473XHR finished loading: GET "local://simulator/views/about.html".

Now ...
If i open the index html file in firefox everything works as expected.
If i deploy it to a android phone ... it also works exactly as expected.

The problem is slowing my development though.

Any ideas?

Thanks, Matt

[Matt]

Im answering my own questions too often....

This does work:
<a href="#/app/competition-list">
    test
</a>

but these break the app in the simulator
<ion-list>
            <ion-item href="#/app/competition-list">
                Competitions
            </ion-item>
            <ion-item href="#/app/competitor-search">
                Find a competitor
            </ion-item>
            <ion-item href="#/app/search">
                About
            </ion-item>
        </ion-list>

[Matt]

I managed to fix the second problem...

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|local):/);
(http://stackoverflow.com/questions/15606751/angular-changes-urls-to-unsafe-in-extension-page)

The urls in the simulator were getting changed href="unsafe:local://simulator/... blah ..."
And the chrome simulator did not like this too much :)

[Borislav]

Hello Matthew,

As you already noticed the AppBuilder simulator doesn't fully support the simulation of angular and in particular ionic apps.

AppBuilder simulator is using a local cache of users projects. To locate the files of the project on the hard disc a custom url scheme is used - "local://simulator". When the url is prefixed with "unsafe:" the simulator is unable to find the desired file and this is causing the blank screen and error messages.

We are sorry for the inconvenience. We'll investigate the issue further and will do our best to introduce support for such projects in AppBuilder simulator.

Regards,
Borislav
Telerik

 

 

[Matt]

Thanks Borislav

I forget the 'file' part above for when its deployed to the phone as well...

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|local|file):/);
and a similar thing for the img sanitation

I have my work around for now at least. The simulator is fantastic for productivity when its working as expected. If only it had some of these parts as well...
http://docs.telerik.com/kendo-ui/bootstrapper
(or would they just get in the way ... the decisions)

Thanks, Matt

[Zdravko]

Hello Matt,

Thank you very much for your feedback and for sharing your findings with out community.
Our users' opinion is valuable for us and that is why I would recommend posting any new feature suggestion and improvement you like to see to our feedback portal. Thus you can track the progress and our community could vote for them.

Regards,
Zdravko
Telerik

 

 

[Jit]

same problem with the Kendo app-builder.Changes the code below as an example to : 

<a class="details-link" data-role="listview-link" href="unsafe:local://simulator/index.html#!details?BlogID=17">

Any solution to this...or give up with appbuilder and angular??? 

 

 

source code

  <div k-template>

                <a class="details-link" data-role="listview-link"  href="\#!details?BlogID={{dataItem.BlogID}}">
                    <h2>
                        {{dataItem.BlogID}} &nbsp;
                        {{dataItem.Title}}
                    </h2>
                </a>
            </div>

[Matt]

Hi Jit, 

Can you see if the following works for you.

My app's framework is ionic (angularjs all over the place). I have two projects working successfully in angularjs and appbuilder (no issues or defects). Both have more than 15 views and do a lot of routing.  

Your problem looks similar to the one that I experienced. These projects are at home so I'll copy the exact code when i get home...

From the app module initialization can you add:

angular.module("something", []).config(function($compileProvider){
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|local|file):/);
});

I cant remember if i do that in .config() or .run()

If you are using Ionic or angular-ui-router (https://github.com/angular-ui/ui-router) I would recommend using the ui-sref attribute and link it to a state. It saves so much trouble with routing and passing on routing values later on.

 

Thanks,

Matt

[Kaloyan]

Hello Jit,

I think that Matthew's suggestion is straight to the point, so please let us know if you will require further assistance.

Regards,
Kaloyan
Telerik