Error: Cannot match any routes. URL Segment: 'home'

Question

I just started learning router in angular and I am unable to use named outlet, please take a look at the following code

const routes: Routes = [{
    path: "about",
    component : AboutComponent,
    children : [{
            path : "contact",
            component: ContactComponent }, {
            path : "message",
            component: MessageComponent }, {
            path : "",
            component: ContactComponent },
             ]},
   {
    path: "home",
    component : HomeComponent 
    // outlet : "main" When I add this, it is not working
   },{
    path: "",
    component : HomeComponent,
    outlet : "main"
   }];

app.component.html
------------------
<h1>The Header</h1>
<a routerLink="home">Home</a>
<a routerLink="about">About</a>
<router-outlet></router-outlet>
<router-outlet name="main"></router-outlet>
<h1>The footer</h1>

The above code works fine but when I add outlet to the path:'home', it says Error: Cannot match any routes. URL Segment: 'home'.

If you are just learning routing, you may be interested in my course: "Angular Routing": app.pluralsight.com/library/courses/angular-routing/… It covers the many different types of routing. You can sign up for a week for free. — DeborahK

A. Tim A. Tim · Accepted Answer · 2017-07-27T20:06:43

You have to specify outlet name

<a [routerLink]="[{ outlets: { main: ['home'] } }]">Home</a>

Error: Cannot match any routes. URL Segment: 'home'

1 Answers