Error: Cannot match any routes. When lazy loading an Angular auxilary route

Question

I am trying to make a nested child route call to load in an auxilary router outlet, but I cannot seem to make it work. I keep getting the Error: Cannot match any routes. URL Segment:'header/secondary/abc'

StackBlitz Link: https://stackblitz.com/edit/angular-ivy-t3x2cw?file=src/app/header/header.component.ts

My expected result is to have the Secondary and Abc modules/components load on the left in the normal router outlet <router-outlet></router-outlet>, and the Test component to load on the right in the aux route <router-outlet name="aux"></router-outlet> . Like in the image below.

question from:https://stackoverflow.com/questions/66051691/error-cannot-match-any-routes-when-lazy-loading-an-angular-auxilary-route

Answer 1

There are a few problems:

First, notice the header.component.html's content:

<div>
  <router-outlet></router-outlet>
</div>
<div>
  <router-outlet name="aux"></router-outlet>
</div>

and header component's routes:

const routes: Routes = [
  {
    path: '',
    component: HeaderComponent,
    children: [
      { path: '', redirectTo: 'secondary', pathMatch: 'full' },
      {
        path: 'secondary',
        loadChildren: () =>
          import('./../secondary/secondary.module').then(
            (m) => m.SecondaryModule
          ),
      },
    ],
  },
];

there is a mismatch between what the component's view wants to show and that the route configuration describes. As a rule of thumb, what's in the view of component X must correspond with what the component X requires in the route configuration. In this case, the header component's view requires a named outlet, aux, but in the route configuration there are only paths for primary outlets(i.e secondary).

So, if you want your component to handle multiple outlets, you can do something like this:

// header.component route configuration

const routes: Routes = [
  {
    path: '',
    component: HeaderComponent,
    children: [
      { path: '', redirectTo: 'secondary', pathMatch: 'full' },
      {
        path: 'secondary',
        loadChildren: () =>
          import('./../secondary/secondary.module').then(
            (m) => m.SecondaryModule
          ),
      },
      
      // !
      {
        path: 'foo',
        outlet: 'aux',
        component: FooComponent,
      },
    ],
  },
];

and the navigate() method would look like this:

navigate() {
    this.router.navigate([
      "header",
      {
        // key-value pairs
        // `key`: the **name** of the outlet
        // `value`: the paths defined for the outlet
        outlets: {
          primary: ["secondary", "abc"],
          aux: ["foo"]
        }
      }
    ]);
  }

StackBlitz demo.

Also, if you'd like to read more about Angular Router, I'd recommend having a look at:

• Angular Router: Revealing some interesting facts and features
• Demystifying angular/router: what is RouterScroller and why is it useful ?