Styjun

I am trying to implement routing functionality onto my Angular application, with partial success. Routing works on the main container of my application (the paths, without an outlet property).

The problem I am having is that I am trying to implement a second router outlet for a sidebar (paths with the outlet property called 'sidebar'). It isn't working.

The paths I have are as follows:

 const appRoutes: Routes = [
 path: '', component: WorkspaceAreaComponent , // localhost:4200/workspace
 path: 'workspace', component: WorkspaceAreaComponent , // localhost:4200/workspace
 path: 'reports', component: ReportsAreaComponent, children: [
 path: '', component: ActiveProjectStatisticsComponent ,
 path: 'active-project-stats', component: ActiveProjectStatisticsComponent ,
 path: 'productivity-tracking', component: ProductivityTrackingComponent ,
 ] ,
 path: 'templates', component: TemplatesAreaComponent, children: [
 path: '', component: TemplateSectionsComponent ,
 path: 'email', component: TemplateEmailComponent 
 ] ,
 path: '', component: TemplatesComponent, outlet: 'sidebar' ,
 path: 'templates', component: TemplatesComponent, outlet: 'sidebar' ,
 path: 'reports', component: ReportsComponent, outlet: 'sidebar' 
];

The component for the main container looks as follows:

<div class="mainContainer">
 <router-outlet></router-outlet>
</div>

The component for the sidebar looks as follows:

<div class="asideBox">
 <router-outlet name="sidebar"></router-outlet>
</div>

The parent component template containing both of them is as follows:

<app-header></app-header>
<div class="bodyContainer">
 <div *ngIf="!isOrganiserPage; else organiserPane" class="flexResponsive768">
 <aside class="width20">
 <!-- SIDEBAR COMPONENT -->
 <app-sidebar></app-sidebar>
 </aside>
 <!-- MAIN COMPONENT -->
 <main class="width80" app-main-pane>

 </main>
 </div>
 <ng-template #organiserPane>
 <main></main>
 </ng-template>
</div>
<app-right-pane></app-right-pane>
<app-modals></app-modals>

Can somebody please help me with this issue? I've tried going on tutorials to solve this, but I haven't gotten much luck.

Thanks.

I just found the answer to my own question.

The paths themselves were fine, it was the router link that needed changing.

I changed it from this:

<div class="mainMenu flex">
 <a routerLink="organiser" class="item" [ngClass]="organiserTabActive ? 'active' : ''" (click)="onClick(1)">ORGANISER</a>
 <a routerLink="workspace" class="item" [ngClass]="workspaceTabActive ? 'active' : ''" (click)="onClick(2)">WORKSPACE</a>
 <a routerLink="reports" class="item" [ngClass]="reportsTabActive ? 'active' : ''" (click)="onClick(3)">REPORTS</a>
 <a routerLink="templates" class="item" [ngClass]="templatesTabActive ? 'active' : ''" (click)="onClick(4)">TEMPLATES</a>
 </div>

to this:

<div class="mainMenu flex">
 <a [routerLink]="[ outlets: sidebar: ['organiser'] ]" class="item" [ngClass]="organiserTabActive ? 'active' : ''" (click)="onClick(1)">ORGANISER</a>
 <a [routerLink]="[ outlets: sidebar: ['workspace'] ]" class="item" [ngClass]="workspaceTabActive ? 'active' : ''" (click)="onClick(2)">WORKSPACE</a>
 <a [routerLink]="[ outlets: sidebar: ['reports'] ]" class="item" [ngClass]="reportsTabActive ? 'active' : ''" (click)="onClick(3)">REPORTS</a>
 <a [routerLink]="[ outlets: sidebar: ['templates'] ]" class="item" [ngClass]="templatesTabActive ? 'active' : ''" (click)="onClick(4)">TEMPLATES</a>
 </div>

And it all works fine. Thanks to nobody else but me for finding out the answer!