CODEWITHSUNDEEP
angulartypescript
VhsPiceros
VhsPiceros

Reputation: 426

Problem routes Children in angular with simple component

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>

Upvotes: 0

Views: 95

Answers (1)

Fussel
Fussel

Reputation: 1865

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>

Upvotes: 2

Related Questions