CODEWITHSUNDEEP
angularangular-routingangular-routerrouter-outletangular-auxiliary-routes
user5427906
user5427906

Reputation: 59

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

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. Trying to load the Test component in the auxilary route to the right of the ABC component

Upvotes: 3

Views: 753

Answers (1)

Andrei Gătej
Andrei Gătej

Reputation: 11934

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:

Upvotes: 2

Related Questions