Device Simulator - ionic

9 posts, 1 answers
  1. Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 26 Feb 2015 Link to this post

    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
  2. Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 26 Feb 2015 in reply to Matt Link to this post

    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>
  3. Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 02 Mar 2015 in reply to Matt Link to this post

    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 :)
  4. Answer
    Borislav
    Admin
    Borislav avatar
    35 posts

    Posted 03 Mar 2015 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  5. Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 03 Mar 2015 in reply to Borislav Link to this post

    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
  6. Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 06 Mar 2015 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  7. Jit
    Jit avatar
    1 posts
    Member since:
    Jul 2007

    Posted 28 May 2015 Link to this post

    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>

  8. Matt
    Matt avatar
    43 posts
    Member since:
    May 2013

    Posted 29 May 2015 in reply to Jit Link to this post

    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

  9. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 02 Jun 2015 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top