Problem routes Children in angular with simple component

Question

I have a problem with routes in angular 8, the problem is the routes in children its not working

my routes are:

const routes: Routes = [
  {
    path: 'admin', component: MainComponent, children: [
      { path: 'uno', component: HomeComponent, outlet: 'sub' },
      { path: '', component: HomeComponent, outlet: 'sub' },
      //{ path: '', component: HomeComponent, outlet: 'sub' },
    ]
  }
];

The url localhost:5001/admin is working the components "MainComponent" and "HomeComponent" show in the browser, but the url localhost:5001/admin/uno no, in the console i have a messege " Error: Cannot match any routes. URL Segment: 'admin/uno'"

Thanks in advance

** update **

I have this in the app.component.html

<router-outlet></router-outlet>

And in the main.component.html

<div id="content" class="content">
    <div>
      <button routerLink="uno">Tab1</button>
    </div>
    <router-outlet name="sub"></router-outlet>
  </div>

post also your MainComponent html and your HomeComponent html — Panagiotis Bougioukos
– Panagiotis Bougioukos, Commented Dec 17, 2020 at 22:54
@Passersby I have edited the question with the router-outlet (both) — VhsPiceros
– VhsPiceros, Commented Dec 18, 2020 at 0:43

Fussel · Accepted Answer · 2020-12-18 09:03:39Z

2

Two solutions for your issue. First if you want to use named outlets your link must look like this:

<button [routerLink]="[{outlets: {sub: ['uno']}}]">Tab1</button>

Second solution (preferred in this case I think) would be to remove the name from the <router-outlet> and from the path configuration. As you have a nested router-outlet in your MainComponent in route /admin all child routes will be rendred in the router-outlet of the MainComponent. Possible you have to add pathMatch: 'full' to your child routes.

const routes: Routes = [
  {
    path: "admin",
    component: MainComponent,
    children: [
      { path: "uno", component: HomeComponent, pathMatch: 'full'},
    ]
  }
];

<div id="content" class="content">
  <div>
    <button routerLink="uno">Tab1</button>
  </div>
  <router-outlet></router-outlet>
</div>

answered Dec 18, 2020 at 9:03

Fussel

1,8651 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VhsPiceros Over a year ago

Thanks @Fussel, but is not working , the problem is not the router-outlet is a children in the routes.

Fussel Over a year ago

@VhsPiceros then you should update your question, because then I do not get what you are trying to achive

Collectives™ on Stack Overflow

Problem routes Children in angular with simple component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related