Angular 2 Routing Children and router-outlet

Question

I'am using routing with children which should be loaded in separate outlet. All the components are placed directly inside the /app folder.

app.router.ts:

export const router: Routes = [

    { path:'dashboard', canActivate:[AuthguardGuard], component: DashboardComponent },
    { path:'', component: LoginComponent },
    { 
        path: 'dashboard', component: DashboardComponent, 
        children: [
           { path:'features', component: FeaturesComponent, outlet: 
           { path:'signup', component: SignupComponent, outlet: 'content' },
           { path:'more', component: MoreComponent, outlet: 'content', 
           { path: '**', component: PageNotFoundComponent }
       ]
    }
];

dashboard.component.html:

<a [routerLink]="['./']">Overview</a>
<a [routerLink]="['features']">Features</a>
<a [routerLink]="['details']">How To</a>
<a [routerLink]="['more']">SignUp</a>
<a [routerLink]="['signup']">SignUp</a>

When loading the app under: http.//localhsot:4200, I first start with a login component/page (loaded in unnamed router-outlet as default) which checks a user and pass. After that it goes to dashboard component/page (using AuthguardGuard). URL is then: http://localhost:4200/dashboard From the dashboard page I want to be able to navigate to other pages/components, and they should be loaded in the outlet:"content"

app.component.ts:

<main class="mdl-layout__content">
    <div class="mdl-layout__tab-panel is-active" id="overview">
        <router-outlet></router-outlet>
        <router-outlet name="content"></router-outlet>
    </div>
</main>

I have been trying few suggestions found here on the platform, but none of them did help. e.g.: <a [routerLink]="['signup', {outlets: {content: 'signup'}}]">SignUp</a> <a [routerLink]="['../signup']">SignUp</a>

But it didn't work... different errors like: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'signup'

Any Idea what I'am doing wrong or what should I change or add please?

Unfortunately not.. same Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'signup' — k.vincent
have you found any fix for this as i am having same problem. But for me ['/dashboard',{outlets: {content:'signup'}}] worked. but it created a URL which i cant use. — Praveen Rawat
@PraveenRawat: Yes, working fine now fine. Could you please post the generated URL which you can't use. It would be helpful. — k.vincent

brijmcq brijmcq · Accepted Answer · 2017-07-18T11:41:46

I think the fix for this is very difficult. Try to define an empty path in your routerlink like this

[routerLink]="['', {outlets: {content: 'signup'}}]">SignUp</a>

You defined your named outlet at the app.component.html that's why the path is empty

Update 1

The reason why the named router does not show up with your children routes is because your named router is in the same template with your Dashboard like this

 <router-outlet></router-outlet>
 <router-outlet name="content"></router-outlet>

The error here is that your "content" router is on the same level with your "main" router where the dashboard will show up. The "content" router should be inside of dashboard.component.html and NOT in your app.component.html. Just copy paste the <router-outlet name="content"></router-outlet> inside your dashboard.component.html and it should work.

Angular 2 Routing Children and router-outlet

1 Answers