Child Routing for Angular 5 not working properly

Question

Hello I am trying to use child routing, but it does not work as intended.

My angular 5 structure:

In this scenario, the top-nav contains links to load submodules and sub-nav has links to update the submodule's contents.

The app module (and app component) contains a top navbar to navigate to different submodules and the app component template could look like this

 <top-navbar></top-navbar>
 <router-outlet></router-outlet>

But here is the complexity. I need my submodules to have similar layout with a second level nav bar and their own router outlet to load their own components.

 <sub-navbar></sub-navbar>
 <router-outlet name='sub'></router-outlet>

My app.module.ts

RouterModule.forRoot([
  {
    path: 'career', component: CareerComponent,
    children: [
      { path: 'roles', component: rolesComponent, outlet: 'sub' }
    ]
  }
])

My HTML file, I am using the following format on my nav buttons:

[routerLink]="[{ outlets: { sub: ['roles'] } }]"

I also have tried the following (this does nothing, I click on Roles button and nothing happens):

[routerLink]="['/roles']"

On top menu I click on Career from the nav. Now my url shows as mywebsite.com/career

now from here I have a career page with my side menu, one of the button is Roles. This should change the partial view of the page. The component is loaded right, the problem is that the url format is wrong.

Expected URL:

 mywebsite.com/career/roles

How it displays(WRONG) :

 mywebsite.com/career/(sub:roles)

without deep too much inside your configurations, this doesn't seems wrong. When you are using named outlet, this is how you access it. You should read more about it angular.io/guide/… — dAxx_
How do I change my configuration to have it display as career/roles ? — CryptoDood

DeborahK DeborahK · Accepted Answer · 2018-07-24T22:41:16

First, let's ensure we are on the same page regarding terminology.

"Child" routes are nested routes. Something like this:

Notice that the app route's router outlet is the full screen. The shell component's router outlet is the area under the nav bar. The edit component's router outlet is the area under the tabs.

Child routes are defined using the children property as you have in your route configuration shown in your question above.

Child routes are different from named (also called auxiliary) routes. Aux routes are for routes that are side by side and not in a nested relationship. There are currently lots of bugs and issues with aux routes and I don't recommend them at this time.

It sounds like from your description that you really need child routes not aux/named routes. So you should not be using the name attribute nor the outlet property.

Unless I misunderstand your scenario?

I have a youtube video that demonstrates child routes (and some other routing techniques) here: https://www.youtube.com/watch?v=LaIAHOSKHCQ&t=5s

And you can find sample code here:

https://github.com/DeborahK/MovieHunter-routing

and here:

https://github.com/DeborahK/Angular-Routing

Child Routing for Angular 5 not working properly

1 Answers