CODEWITHSUNDEEP
angularrouter-outletangular12
vixero
vixero

Reputation: 514

How to navigate from one router outlet to another?

I have been searching for half a day now, yet I can't find anything that is working.

These are the routes I have.

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'feature2',
    pathMatch: 'full',
  },
  {
    path: '',
    canActivate: [MsalGuard],
    loadChildren: (): Promise<FeaturesModule> => import('./features/features.module').then((m) => m.FeaturesModule),
  },
  {
    path: 'auth',
    component: MsalRedirectComponent,
  },
  {
    path: '**',
    component: ErrorPageComponent,
    canActivate: [MsalGuard],
  },
];

features-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: FullLayoutComponent, // content with sidebar
    canActivate: [AuthGuard],
    children: [
      {
        path: 'feature1',
        loadChildren: (): Promise<Feature1Module> => import('./feature1/feature1.module').then((m) => m.FeatureModule),
      },
      {
        path: 'feature2',
        loadChildren: (): Promise<Feature2Module> => import('./feature2/feature2.module').then((m) => m.FeatureModule),
      },
    ],
  },
  {
    path: '',
    component: ContentLayoutComponent, // content without sidebar
    children: [
      {
        path: 'feature3',
        loadChildren: (): Promise<Feature3Module> => import('./feature3/feature3.module').then((m) => m.FeatureModule),
      },
    ],
  },

app.component.ts has a router-outlet. So do the full-layout-component.ts and content-layout-component.ts. When I try to navigate from feature3 (inside feature3) to feature2 with router.navigate('feature2') nothing happens. After inspecting the tracing, I have this:

Router Event: NavigationStart
    NavigationStart(id: 3, url: '/feature2')
    NavigationStart{id: 3, url: "/feature2", navigationTrigger: "imperative", restoredState: null}id: 3navigationTrigger: "imperative"restoredState: nullurl: "/feature2"__proto__: RouterEvent
Router Event: RoutesRecognized
    RoutesRecognized(id: 3, url: '/feature2', urlAfterRedirects: '/feature2', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'feature2', path:'feature2') { Route(url:'', path:'') { Route(url:'', path:'') }  }  }  }  } )
    RoutesRecognized{id: 3, url: "/feature2", urlAfterRedirects: "/feature2", state: RouterStateSnapshot}
Router Event: GuardsCheckStart
    GuardsCheckStart(id: 3, url: '/feature2', urlAfterRedirects: '/feature2', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'feature2', path:'feature2') { Route(url:'', path:'') { Route(url:'', path:'') }  }  }  }  } )
    GuardsCheckStart{id: 3, url: "/feature2", urlAfterRedirects: "/feature2", state: RouterStateSnapshot}
Event: ChildActivationStart
    ChildActivationStart(path: '')
    ChildActivationStart{snapshot: ActivatedRouteSnapshot}
Router Event: ActivationStart
    ActivationStart(path: '')
    ActivationStart{snapshot: ActivatedRouteSnapshot}

If I manually navigate to feature2 it works as expected. I think I am missing something but can't see what. How can I get this working?

Upvotes: 0

Views: 1256

Answers (1)

Some random IT boy
Some random IT boy

Reputation: 8467

Because routing happens relatively to the currently activated route. If you want to go to a parent route you can use a full url like: /root/feature/child

Or you can just use relative navigation:

Assuming we're instide feature and we have a sibling route /root/feature1: you could this.router.navigate(['..', 'feature1']); or '../feature1' altogether

Upvotes: 1

Related Questions