Search code examples
angularrouterangular-routerrouterlinkrouter-outlet

Navigation in a named outlet in Angular does not work. Why?

Navigation in a named outlet in Angular does not work. Why?

Here is the error:

enter image description here

NavigationStart(id: 3, url: '/(sidebar-outlet:login/(sidebar-outlet:account-creation)//header-info-outlet:empty)')
...
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'
Error: Cannot match any routes. URL Segment: 'login'
    at ApplyRedirects.noMatchError (router.js:4396)

Here is my routes setup:

const routes: Routes = [
  { path: "empty", component: EmptyComponent },
  { path: "", component: HomeComponent },

  { path: "empty", component: EmptyComponent, outlet: Outlets.sidebar },
  { path: "login", component: LoginComponent, outlet: Outlets.sidebar },
  {
    path: "account-creation",
    component: CreateAccountComponent,
    outlet: Outlets.sidebar
  },
  { path: "menu", component: MainMenuComponent, outlet: Outlets.sidebar },

  { path: "empty", component: EmptyComponent, outlet: Outlets.headerInfo },
  {
    path: "header-info",
    component: HeaderInfoComponent,
    outlet: Outlets.headerInfo
  }
];

Here are the Outlets:

export const Outlets = {
  sidebar: "sidebar-outlet",
  headerInfo: "header-info-outlet"
};

Here is the routerLink which once is clicked produces the error:

[routerLink]= "[{ outlets: { 'sidebar-outlet': ['account-creation']}}]"

Here is the penultimate state of a router:

/(sidebar-outlet:login//header-info-outlet:empty)

Here is the expected ultimate state of a router in case the error will be fixed:

/(sidebar-outlet:account-creation//header-info-outlet:empty)

I am very confused and after searching for an answer for two days I was not able to find one. By such a routerLink (particularly 'sidebar-outlet': ['account-creation']) I am expecting the route after click to be /(sidebar-outlet:account-creation//header-info-outlet:empty), but it tries to become /(sidebar-outlet:login/(sidebar-outlet:account-creation)//header-info-outlet:empty) as we can see in the error.

How could I fix it?

UPDATE

Here is my app.component.html (only the shown below part contains router-outlet, there are no other places in my project`s templates where I would have used a router-outlet):

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block"
  rel="stylesheet"
/>

<div class="mat-app-background">
  <mat-toolbar class="main-toolbar" color="primary">>
    <router-outlet name="header-info-outlet"></router-outlet>
  </mat-toolbar>

  <mat-sidenav-container>
    <mat-sidenav #sidenav 
      position="end" 
      mode="over"
      class="sidebar-container">
      <router-outlet name="sidebar-outlet"></router-outlet>
    </mat-sidenav>

    <mat-sidenav-content>
      <router-outlet></router-outlet>
      <app-footer></app-footer>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>
Solution

  • This could work for you. Create a new component named sideNavContainer. Then create another one named sideNavComponent and another SidNav2Component, break up the html so the container contains both sideNavs., Create a route to the container, then add 2 child routes pointing to others.

    Add the container to toolbox. Any nav to children should refresh children without affecting ant thing else.