When using nested router-outlet, the back button exits the App


#1

I have nested router and when I navigate to different page from the home page, the back button on the phone exists the app entirely rather than going back to the previous page. Can anyone help me with this issue?


#2

you would have to override the button click to implement a this.router.back()/this.router.backToPreviousPage() call


#3

Thank you. I tried to override the activityBackPressedEvent function and even tried to implement thee function you mentioned, but I get error “cannot read property ‘back’ of undefined”.

if (application.android) {
application.android.on(application.AndroidApplication.activityBackPressedEvent, function (args) {
console.log(“pressed back2”);
this.router.back();
// RouterExtensions.back()
// Set args.cancel = true to cancel back navigation and do something custom.
});
}
this is the code snippet I used. Any ideas?


#4

you will need to use args.cancel = true; in the very first line of the function, and my guess is that you havent defined router


#5

Thank you. I tried it but still get an error.

Edited code

  application.android.on(application.AndroidApplication.activityBackPressedEvent, function (args) {
    args.cancel = true; 
      console.log("pressed back2");
      this.router.back();
     // RouterExtensions.back()
      // Set args.cancel = true to cancel back navigation and do something custom.
  });
}

I have also defined router at the top : import {RouterExtensions} from "nativescript-angular";

And the error on back click:

An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException: 
Calling js method onBackPressed failed

TypeError: Cannot read property 'back' of undefined
File: "file:///data/data/org.testApp.testApp/files/app/pages/home/home.component.js, line: 24, column: 19

StackTrace: 
	Frame: function:'', file:'file:///data/data/org.testApp.testApp/files/app/pages/home/home.component.js', line: 24, column: 20
	Frame: function:'Observable.notify', file:'file:///data/data/org.testApp.testApp/files/app/tns_modules/tns-core-modules/data/observable/observable.js', line: 103, column: 23
	Frame: function:'ActivityCallbacksImplementation.onBackPressed', file:'file:///data/data/org.testApp.testApp/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 678, column: 44
	Frame: function:'NativeScriptActivity.onBackPressed', file:'file:///data/data/org.testApp.testApp/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 35, column: 25


	at com.tns.Runtime.callJSMethodNative(Native Method)
	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
	at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
	at com.tns.Runtime.callJSMethod(Runtime.java:957)
	at com.tns.Runtime.callJSMethod(Runtime.java:941)
	at com.tns.Runtime.callJSMethod(Runtime.java:933)
	at com.tns.NativeScriptActivity.onBackPressed(NativeScriptActivity.java:53)
	at android.app.Activity.onKeyUp(Activity.java:2981)
	at android.view.KeyEvent.dispatch(KeyEvent.java:2715)
	at android.app.Activity.dispatchKeyEvent(Activity.java:3273)
	at com.android.internal.policy.DecorView.dispatchKeyEvent(DecorView.java:354)
	at android.view.ViewRootImpl$ViewPostImeInputStage.processKeyEvent(ViewRootImpl.java:4733)
	at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4605)
	at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4147)
	at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4200)
	at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4166)
	at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4293)
	at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4174)
	at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:4350)
	at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4147)
	at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4200)
	at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4166)
	at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4174)
	at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4147)
	at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4200)
	at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4166)
	at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4326)
	at android.view.ViewRootImpl$ImeInputStage.onFinishedInputEvent(ViewRootImpl.java:4487)
	at android.view.inputmethod.InputMethodManager$PendingEvent.run(InputMethodManager.java:2435)
	at android.view.inputmethod.InputMethodManager.invokeFinishedInputEventCallback(InputMethodManager.java:1998)
	at android.view.inputmethod.InputMethodManager.finishedInputEvent(InputMethodManager.java:1989)
	at android.view.inputmethod.InputMethodManager$ImeInputEventSender.onInputEventFinished(InputMethodManager.java:2412)
	at android.view.InputEventSender.dispatchInputEventFinished(InputEventSender.java:141)
	at android.os.MessageQueue.nativePollOnce(Native Method)
	at android.os.MessageQueue.next(MessageQueue.java:325)
	at android.os.Looper.loop(Looper.java:142)
	at android.app.ActivityThread.main(ActivityThread.java:6494)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)

#6

I am using the same implementation and i get the same error. Did you fix it? If yes please tell me your solution.