[SOLVED] Split pane: main ion-nav navigation crashes (Cannot read property 'push' of null)

Ionic Framework ionic-v3
1

Hi! I’ve set up a ion-split-pane like this:

<ion-split-pane>
  <ion-nav [root]="siderot"></ion-nav>
  <ion-nav [root]="rot" main></ion-nav>
</ion-split-pane>

To communicate between the siderot and main view rot I’ve created a service like the one described here: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child (rxjs subject observed).

When I send a message through the service to the main view that does either a setRoot or push on the ViewChild it crashes:

this.com.showEntity$.subscribe((entity) => {
      this.navCtrl.setRoot(EntityPage, {id: entity.id})
    });

Stacktrace:

Error: Uncaught (in promise): TypeError: Cannot read property 'push' of null
TypeError: Cannot read property 'push' of null
    at NavControllerBase._queueTrns (http://localhost:8100/build/main.js:51045:20)
    at NavControllerBase._setPages (http://localhost:8100/build/main.js:50975:21)
    at NavControllerBase.setRoot (http://localhost:8100/build/main.js:50949:21)
    at SafeSubscriber._next (http://localhost:8100/build/main.js:91135:27)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/main.js:1355:16)
    at SafeSubscriber.next (http://localhost:8100/build/main.js:1304:22)
    at Subscriber._next (http://localhost:8100/build/main.js:1257:26)
    at Subscriber.next (http://localhost:8100/build/main.js:1221:18)
    at Subject.next (http://localhost:8100/build/main.js:6557:25)
    at Communication.showEntity (http://localhost:8100/build/main.js:28994:29)
    at SafeSubscriber._next (http://localhost:8100/build/main.js:91199:42)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/main.js:1355:16)
    at SafeSubscriber.next (http://localhost:8100/build/main.js:1304:22)
    at Subscriber._next (http://localhost:8100/build/main.js:1257:26)
    at Subscriber.next (http://localhost:8100/build/main.js:1221:18)
    at v (http://localhost:8100/build/polyfills.js:3:4864)
    at s (http://localhost:8100/build/polyfills.js:3:4289)
    at http://localhost:8100/build/polyfills.js:3:4690
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:10284)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:44375:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:10220)
    at e.runTask (http://localhost:8100/build/polyfills.js:3:7637)
    at i (http://localhost:8100/build/polyfills.js:3:3707)

It seems that the queue is null within the NavControllerBase. Does anyone have any idea? Before subscribe is invoked I’ve done a setRoot on the injected NavController, which I assume is the NavController for the main view in the split. That works without problems.

2

A weird twist is that after the first crash “something” is set and the navigation works after that…

3

You have 2 [root]=

I dont think you are suppose to have 2. the side nav should be [content] with the main [root] referencing the content menu

<ion-split-pane>
   <ion-menu [content]="siderot">
   </ion-menu>

   <ion-nav [root]="rot" #content swipeBackEnabled="false" main></ion-nav>
</ion-split-pane>
4

Hm. But how would I when implement the navigation in the menus? I’ve create list components to go into the side root / menu area. In this area I also do navigation (as shown in the nav inception in the split pane blog post) so that I go to the next level in the menus.

5

I created an example from the Ionic 2 tabs starter here, that is working as far as I can see. :slight_smile:

Now I just need to debug my non-working code… :joy:

6

oh right are you trying to get the “nav inception” working?

7

Whatever it is called, I needed the nested menus :slight_smile:

So my issues all boiled down to my subscription to the component communication service (rxjs) that I didn’t unsubscribe in ionViewWillUnload. After I set up the unsubscribe I had no problems. I guess the old subscription was lingering around and fired since it used the same provider after the setRoot.

2 Likes