Ionic beta:14 doesn't route

ionic-v1
#22

This seems to be a real bug in beta.14 version.

After updating to beta.14 my app routing is not working as expected. I’m using ionic-bundle.js.

I’m using modal for navigation with the (img ng-click="goToState(‘app.state1’) />) click method calling so in my controller I’m redirecting user with $state.go() method.

I debug the app and find out that my routes get’s call and app URL changed accurately. But control never comes in controller and no content rendered on my templates.

I also experienced sometimes; if I re-visit any route again the previously cached contend being displayed again control never comes in controllers. This behavior is not consistent and no error/exception generated on console.

I already spent too much time to fix this by shifting to nightly build, by changing routes with ui-sref etc but nothing worked.

I don’t want to move back to v.13 because I need to use some feature/fixes present in v.14 like $ionicHistory etc. Please help me on this issue or let me know if I’m doing anything wrong?

Thanks

#23

@pcr Then it sounds like there is an issue with your code. Would you be able to PM a zip of your project for me to look at?

@mrazadar sounds like you’re describing how our views life-cycle works now.

http://ionicframework.com/docs/api/directive/ionView/

#24

@mhartington Can you explain the breaking change between beta13 and beta14?

HINT:
with $ionicConfigProvider.views.maxCache(0); my views don’t get displayed…
with $ionicConfigProvider.views.maxCache(1); my views get displayed but the {{ }}'s don’t get evaluated…

My HTML in Chrome (rendered) and the console.logs of events:

<ion-nav-view animation="slide-left-right" class="view-container" nav-view-transition="none" nav-view-direction="none"><span nav-view="cached" style="-webkit-transition-duration: 0ms; transition-duration: 0ms; -webkit-transform: translate3d(0%, 0px, 0px);">...</span><ion-view class="pane" nav-view="active" style="-webkit-transition-duration: 0ms; transition-duration: 0ms; -webkit-transform: translate3d(0%, 0px, 0px);">
  <ion-content padding="false" overflow-scroll="{{ !isMobile }}" class="scroll-content ionic-scroll"><div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
    <form name="form" novalidate="novalidate" class="ng-pristine ng-valid" data-ng-controller="AuthenticationController as auth" data-ng-submit="auth.signin(form, vm)">
        <div class="row responsive-md">
            <div class="card col-offset-21 col-58">
                <div class="item form-head item-calm ng-hide" if-language="fr">
                    Connectez-vous à votre compte
                </div>
                <div class="item form-head item-calm ng-hide" if-language="en">
                    Login to your account
                </div>
                <label class="item item-input item-floating-label">
                    <span class="input-label ng-binding">{{ i18n.Email }}</span>
                    <input type="email" placeholder="Email" ng-model="vm.email" autofocus="true" required="" class="ng-pristine ng-untouched ng-valid">
                </label>
                <label class="item item-input item-floating-label">
                    <span class="input-label ng-binding">{{ i18n.Password }}</span>
                    <input type="password" placeholder="Password" ng-model="vm.password" required="" class="ng-pristine ng-untouched ng-valid">
                </label>

                <div class="item item-assertive ng-binding" data-ng-show="auth.error &amp;&amp; posting === false ">
                    {{auth.error}}
                </div>
                <!-- ngIf: !posting -->
                <!-- ngIf: posting -->
            </div>
        </div>
    </form>
    <div class="row spaced responsive-md">
        <a class="col-offset-21 col-58 button button-dark button-small button-calm icon-right ion-ios-compose ng-hide" if-language="en" ui-sref="register" href="#/register">Not registered yet? Sign up now!</a>
        <a class="col-offset-21 col-58 button button-dark button-small button-calm icon-right ion-ios-compose ng-hide" if-language="fr" ui-sref="register" href="#/register">Pas encore enregistré? Enregistrez-vous dès maintenant!</a>
      </div>
      <div class="row spaced responsive-md">
        <a class="col-offset-21 col-58 button button-outline button-calm button-small icon-right ion-ios-locked ng-hide" if-language="en" ui-sref="forgot" href="#/forgot">Forgot your password? Reset it now!</a>
        <a class="col-offset-21 col-58 button button-outline button-calm button-small icon-right ion-ios-locked ng-hide" if-language="fr" ui-sref="forgot" href="#/forgot">Oublié votre mot de passe? Réinitialisé le dès maintenant!</a>
    </div>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="-webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); height: 0px;"></div></div></ion-content>
</ion-view></ion-nav-view>

Events
unloaded only fired when maxcache(0)

authentication.client.service.js:23 [STATE]  Begin  -> login
authentication.client.service.js:27 [STATE]  OK     -> login
application.js:19 $ionicView.loaded
application.js:19 $ionicView.beforeEnter
application.js:19 $ionicView.beforeLeave
application.js:19 $ionicView.afterEnter
application.js:19 $ionicView.enter
application.js:19 $ionicView.afterLeave
application.js:19 $ionicView.leave
application.js:19 $ionicView.unloaded
authentication.client.service.js:23 [STATE]  Begin login -> register
authentication.client.service.js:27 [STATE]  OK    login -> register
authentication.client.service.js:23 [STATE]  Begin register -> login
authentication.client.service.js:27 [STATE]  OK    register -> login
authentication.client.service.js:23 [STATE]  Begin login -> about
authentication.client.service.js:27 [STATE]  OK    login -> about

no $ionicView events refired…

#25

Thanks @mhartington this helps.

#26

@mrazadar Would you please tell us what from @mhartington helps you and how?

#27

The issue @mrazadar was describing had to do with the new view life-cycle events.

1 Like
#28

Thank you @mhartington! This is my issue as well. Without adding “cache: false”, for some reason, my app view won’t load its controller in start up on iOs emulator after I run “ionic emulate ios”. But everything works fine in localhost browser using google chrome. Since I do not know a way to test on iOs simulator like Chrome Dev tool, this been driving me nut. After putting “cache: false” on my initial view, everything work again!
I am using DSCacheFactory to manage caching. Not sure this new cache function in ionic will be useful. More example on how to use it will be great. For now, I will globally disable it to see if your app act like before update?

#29

Hey,

I have the same issu, url change but the state no ( With console.log in my controller, nothing appear, and the template don’t load).

I never have issu with beta-13 with the routing.

I have passed a long time to intent resolve this, but i can’t.
I think an example, or a good explication how the routing operate will be a good idea.

But I think it’s a bug no ?

#30

@pcr the issue was that, after upgrading to ionic.beta.14 my routing wasn’t working as expected. After re-visiting any view ionic automatically loads the previously cached template which is already compiled with the previously cached scope. This is a default behavior in latest ionic version described here

http://ionicframework.com/docs/api/directive/ionView/

I just fixed this by disabling the caching globally

app.config(function($cordovaFacebookProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0);
});

#31

Caching is for me now the only reason to switch to beta 14. Of course there are more improvements.
In my case it all has to do with using navigation instead of just views. In my app I had just 1 view with a leaflet map. Because I had problems with after route to another view and then back to this map view did not work for 2 reasons. The biggest reason was after coming back the view is rendered again which was taking to much time. Now with caching this reason should be gone.

#32

@mhartington

I have good news and very bad news.

I managed to run my app with beta.14. As I said before the non-routing problems were all about navigation. I changed the <ion-header-bar into <ion-nav-bar. And I added menu button. I removed the directive menu-toggle=“left” into a ng-click calling a function in the $scope to open the menu.
After compile the app for IOS in xcode it runs like expected on my ipad.

BUT compiling and running on a Android device the app crashes. I used to test the app on 3 different Android devices. On all the just the app crashes. Not even the splash-screen appears. Just a black screen and after a couple of seconds a toast (little popup) with ‘App has stopped’ [OK].

If I install the beta-13 version of the app is working on all devices like expected.

I hope there is somebody who knows what happens and how to resolve this.

I’m switching back to beta.13 now of course.

#33

Again, if you want, I can take a look at you app and see what the issue is. Just send me a PM.

#34

hi @mhartington, I am experiencing the same issue, the reason I upgraded to beta14 was for the caching feature.
The issue is explained in this post : https://www.youtube.com/watch?v=mOh-Y2my-cQ

Please check it out and hopefully find a fix for this.

#35

Okay…so this seems like a misunderstanding of how the caching works.

So you have your three views.

V1, V2, V3.

Then we chain the navigation as you have in your app.

V1> V2>V3

Each controller has fired and will not run again since scopes are not destroy, rather disconnected and reconnected.

So when you press that button to go to V1 again, that will add to the already existing history.

V1> V2>V3> V1

The home controller won’t fire, because it’s already been fired once so it will just reconnect.
So what needs to be done is to wrap each $state.go() method in a $ionicView event.

.controller('onward', function($scope,$state) {
  $scope.$on('$ionicView.enter', function(){
    console.log("onward");
    $state.go('landed');
  });
})

This is pretty much the same pattern that you see in native SDKs.

1 Like
#36

@mhartington
Hi mike and others in this topic. After all I got my app converted to beta.14 working. Caching works great because I now don’t to rebuild the view with a leaflet map.
A big problem was not cause by the Ionic framework but something weird in the cordova for Android. I solved this by rebuilding the app from scratch and copy/paste.
There are still some minor issues I’m working on.
Thanks for all the good advise.

#37

@mhartington I’ve some questions:

I see in examples in templates directives like: <ion-nav-view></ion-nav-view>. Before beta.14 I only knew about having 1 directive: ion-view /ion-view were the app rendered all the views.
Probably this has changed because of caching views, I searched the new docs but couldn’t find anything about how to use properly the <ion-nav-view>.
Please can you explain this a bit more

As you probably now I have an app with a main view a leaflet map. Now, in beta.14, because the causing technique I can switch smooth between this map view and other views. But sometimes after using a couple of minutes the content of the mapview start scrambled. There is only a small rectangle area in the upper-left corner with some piece of the map. The rest stays empty. Only sopping and restarting the app solves this problem. Until beta.14 I had the map in a div with id=“map”. Just after the
<ion-view> ( now <ion-nav-view>. Is this the right place for the mapdiv.

Answering these 2 question probably can makes my app perfect.

Thank you for the good work and advise.

#38

So nothings changed about how ion-nav-view works. At it’s core, it is still a div that acts as an outlet for view.
Looking at examples for out tabs project, the same code will work in beta 13 and beta 14.

For any view (that is, page in an app) you use ion-view

Please put together a simple example of that map.
You should be putting the map like this

index.html

<ion-nav-view></ion-nav-view>

map.html

<ion-view>
  <ion-content>
    <div id="map">
    </div>
  </ion-content>
</ion-view>
#39

I tried this. Dint work at all. Just a blank screen. I’ve tried ion-nav. I’ve got the map page but without a map.

#40

Please put together a codepen.
You must have some thing off somewhere.

#41

@mhartington Justin to let you know:
I had the div for the map declareren twice. One in index.html and again in the template where the map is put in a view.
Unfortunately this did not solve the problem.
However I discovered 2 interesting things.

The scrambled map happens if I navigatie to another view and then again a view deeper and then go back 2 times to the homepage (the page with map). If navigate just one view and go back the homepage is alright.

Second if the map is scrambled I can repair this by change the orientation of the device. To landscape or portrait. Then the map is viewed correctly.

Maybe this can help you analyse the this problem