0

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.

Chosen1
  • 279
  • 4
  • 18
  • did you check https://stackoverflow.com/questions/34628848/angular2-multiple-router-outlet-in-the-same-template – Akber Iqbal Mar 24 '19 at 03:03

1 Answers1

1

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!

Chosen1
  • 279
  • 4
  • 18