Ui-router does not work properly with Cordova (iOS)

synconme commented 9 years ago

I am sure I'm doing something wrong but it seems like Angular ui-router stopped working in my Cordova iOS app however it works just fine in the browser. It worked before the 0.6.0 release. I build Cordova app using standard 'meteor run ios' command. I use iOS simulator, not real device.

My packages list: meteor-platform 1.2.1 mquandalle:bower 0.1.11 urigo:angular 0.6.1 urigo:ionic 0.2.0

Below some simple code I use for testing purposes:

HTML

<head>
  <base href="/">
</head>
<body>
<div ng-app="testapp">
    <div>Works fine in Cordova</div> <!-- To test that index.html loads in Cordova-->
    <div ui-view></div>
</div>
</body>

JavaScript

if (Meteor.isClient) {

  angular.module('testapp',['angular-meteor', 'ui.router', 'ionic']);

  angular.module("testapp").config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
    function($urlRouterProvider, $stateProvider, $locationProvider){

      $locationProvider.html5Mode(true);

      $stateProvider
        .state('mystate', {
          url: '/mystate',
          templateUrl: 'mystate.tpl'
        })

      $urlRouterProvider.otherwise("/mystate");
    }]);
}

if (Meteor.isServer) {

}

mystate.tpl

<div>Works only in browser</div> <!-- Template does not load in Cordova  -->

bower.json

{
  "name": "testapp",
  "dependencies": {
    "angular-ui-router": "0.2.13"
  },
  "private": true
}

Urigo commented 9 years ago

@netanelgilad might it be related to the different way we bootstrapped Angular when using cordova?

netanelgilad commented 9 years ago

I don't think so as ng-app should take care of that (I think...). Might need to reproduce this myself to see why this happens.

On Thu, Jan 22, 2015, 04:55 Uri Goldshtein notifications@github.com wrote:

@netanelgilad https://github.com/netanelgilad might it be related to the different way we bootstrapped Angular when using cordova?

— Reply to this email directly or view it on GitHub https://github.com/Urigo/angular-meteor/issues/161#issuecomment-70963928 .

synconme commented 9 years ago

Just a dumb guess, might that be caused by placing ng-app="..." into < div > tag, not < body > ? Can't check this, as Meteor throws an error.

Urigo commented 9 years ago

@netanelgilad let's update the Ionic example and test it on both iOS and Android to make sure everything is OK there

ilianaza commented 9 years ago

Not working with urigo:angular v0.6.1.

I've checked out the step_15 branch of the meteor-angular-socially project
Ran **meteor run ios"
Only the Home link appears on the simulator. Looks like ui-router code is not processed at all.

Urigo commented 9 years ago

@synconme can you try updating your meteor-bower package to 1.3.12? I think your version doesn't support bower.json and only smart.json

Anyway I'm going to look deeper into the Ionic package this week

synconme commented 9 years ago

@Urigo I started from uninstalling all relevant packages from the project and then adding them with "meteor add" again. When adding the meteor-ionic package:

meteor add urigo:ionic
 => Errors while adding packages:

While selecting package versions:
error: conflict: constraint mquandalle:bower@0.1.11 is not satisfied by 1.3.12.
Constraints on mquandalle:bower come from:
<top level>
urigo:ionic@0.0.1

Tim-W commented 9 years ago

Having similar issue. My bower version is up-to-date. When running meteor-ionic-example, the app runs fine on my Android device (4.4.2). However, when using .tpl files with angular-ui-router, the app on my Android device turns into a white screen.

synconme commented 9 years ago

@Tim-W How did you manage to install latest versions of mquandalle:bower and urigo:ionic together in one app? I'm getting the errors I mentioned above.

Urigo commented 9 years ago

Just released a new Ionic version (0.3.0) that is not dependent on meteor-bower. We had a lot of trouble with that package and decided to stop using is there. Please check with the new versions and tell me if I can close this

Tim-W commented 9 years ago

Updated meteor-ionic to version 0.3.0. Having same issue as described in my last post. I will investigate this further, it may even be an issue with the meteor core Cordova packages.

synconme commented 9 years ago

Same issue here, with meteor-ionic 0.3.0

Urigo commented 9 years ago

@Tim-W can you upload an example repo that I can fork and have a look?

Tim-W commented 9 years ago

@Urigo https://github.com/Tim-W/kamer-verhuren I've open sourced my app. Some templates are in Dutch, however the js/source files are in English.

Urigo commented 9 years ago

@Tim-W I've pulled request your repo and fixed it: https://github.com/Tim-W/kamer-verhuren/pull/1

@synconme @ilianaza Please look at the changes as well, I understand why you had those problems.

The main problem was the app initialization is different in Cordova, so we do move to manually bootstrapping the application after device is ready like this:

//Module instantiation
angular.module('kamerApp', [
  'angular-meteor', 'ui.router', 'ionic']
);

function onReady() {
  angular.bootstrap(document, ['kamerApp']);
}

if (Meteor.isCordova) {
 angular.element(document).on("deviceready", onReady);
}
else {
  angular.element(document).ready(onReady);
}

Yesterday I've updated the tutorial until step 10. I think I'll change that step 11 will be about PhoneGap and I'll show that there to avoid confusion

Please let me know if that helped you guys

Tim-W commented 9 years ago

Thanks for the fix @Urigo, I think it would be good to give information about this in the angular-meteor and/or ionic-meteor repo.

Urigo commented 9 years ago

cool, do you mind pull request the readme to make it look better?

Urigo commented 9 years ago

Added the PhoneGap integration to the tutorial in step 11. Closing

Urigo / angular-meteor

Ui-router does not work properly with Cordova (iOS) #161