Navigate to previous component



I have a ns-angular app that is structured as follows :

in the app.component I have a master page-router-outlet with 2 pages

  • Login
  • Main

Routing is configured in the following way :

const routes: Routes = [
    { path: '', redirectTo: 'start', pathMatch: 'full' },
    { path: 'start', loadChildren: './views/login/start.module#StartModule' },
    { path: 'main', loadChildren: './views/main/main.module#MainModule' }

    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
export class AppRoutingModule { }

In the main component I have static action bar and a child router-outlet that navigates between these components.
Again routing is defined as :

const mainRoutes: Routes = [
        path: '', component: MainComponent, children: [
            { path: '', redirectTo: 'main/explore', pathMatch: 'full' },
            { path: 'camera', loadChildren: './camera/camera.module#CameraModule' },
            { path: 'explore', loadChildren: './explore/explore.module#ExploreModule' }

export const MainRouting: ModuleWithProviders = RouterModule.forChild(mainRoutes);

What currently happens is that if I am in the - let’s say- explore component ( /main/explore ), I navigate to the the camera component ( /main/camera ) and I press back on my android device, instead of going back to the explore component I go to the start module.
I read the documentation on angular navigation, but even with the following code

android.on(AndroidApplication.activityBackPressedEvent, (data: AndroidActivityBackPressedEventData) => {

I am unable to return to the previous component.
How would I achieve that?


Can you explain the flow from the beginning, what all routes you visited before hitting the issue?

Is it possible for you to create a playground that demonstrates the issue?


Hi Manoj!

So I start the app and go to start component.

From start i go to main/explore

And from main/explore I go to main/camera

When I press back, instead of going to main/explore I get back to the start component.

start and main are two different pages (page-router-outlet), while camera and explore are two components loaded in the main page.

Basically the structure is as follows:



this is where routing of start and main pages is done.

Than in main.component I have :






this router outlet manages navigation between main/explore and main/camera.

Is this info sufficient or should I go about and create a playground?

Thank you so much for your precious time!!


Have you customized location strategy anywhere in your application?

I assume your start module is a simple page without any router outlets right. So I don’t have anything to suspect here, so a playground will help to debug this further.


Hi Manoj!
Sorry for the delay,
here is the playground

Thank you so much for looking into this :slight_smile:


Thanks to @NickIliev, this is the solution:, (data: AndroidActivityBackPressedEventData) => {

data.cancel = true; // prevents default back button behavior