Angular 4 router child path not found (outlet)

Question

I have some issues with Angular 4 router and components. What i'm trying to do. I have a view (SuperUser) which contains 2 oulets (side menu and content).

In router i have Super user with 2 children (sidemenu and content), with it's own router but i'm getting Cannot match any routes. URL Segment: 'superuser/contexts' on http://localhost:4200/superuser/contexts uri. Source bellow.

App.Router

export const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "superuser",
    component: SuperuserComponent,
    children:[
      {
        path: "",
        component: SideMenuComponent,
        outlet: 'superuser-sidemenu'
      },
      {
        path: "contexts",
        component: ContextsComponent,
        outlet: 'superuser-content'
      }

    ]
  },

  {
    path: "",
    redirectTo: "/home",
    pathMatch: "full"
  }
]

SuperUserComponent.html

<div class="py-5 public-area-body-background">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <div id="superuser-sidemenu">
            <router-outlet name="superuser-sidemenu"></router-outlet>
        </div>
      </div>
      <div class="col-md-10">
        <div id="superuser-content">
            <router-outlet name="superuser-content"></router-outlet>
        </div>
      </div>
    </div>
  </div>
</div>

SideMenuComponent.html

<div class="card text-white p-5 bg-light shadow sidemenu">
    <div class="card-body sidemenu">
      <h4 class="mb-4 text-dark" >Main Menu</h4>
        <div class="input-group">
            <select class="custom-select" id="inputGroupSelect04">
              <option selected>Context...</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select> 
        </div>


    </div>
  </div>

ContextsComponent.html

<div class="card text-white p-5 bg-light shadow">
  <div class="card-body">
    <p>Content here</p>
</div>

Thanks!

Answer 1

If you are realing components with children outlets, it is good to make that as a module. In your case you can create to more files say super-user.module.ts and super-user-routing.module.ts.

Hope you are declared all these components in your app.module.ts. This is not a good practice, in future your app become slower. So remove the declarations of SuperUserComponent, SideMenuComponent, and ContextsComponent from app.module and declare them in new super-user.module.ts file. Plus you can create a new component inside superUser and to display the content of your current SuperUserComponent.html, and SuperUserComponent.html file should only contain a <router-outlet></router-outlet>

Change the code of app.router as

export const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: 'superuser',
    loadChildren: './super-user/super-user.module#SuperUserModule'      
  },    
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
]

And finally super-user-routing.module.ts as

export const routes: Routes = [
      {
        path: '',
        component: SuperUserComponet,
        children: [ { path: 'view', component: ListComponent},
        path: 'context', component: ContextSComponent},    
      ...]
    ]

Now you can access these components from any where as routerLink="/superuser/context" and so on. To see the current view of super-user.component.html you need to use routerLink="/superuser/list"