Angular 2 Router Outlet Children

Question

I am new to Angular 2 so I may be doing this incorrectly to begin with.

I have my main navigation that uses a router to show my different pages. inside of one of the pages (call it page A) I have a list that, when an item is clicked, serves a different side bar on that same page. I set up the sidebar components as child routes of page A, but when I click one of the list items, I get the error that error: Error: Cannot match any routes.

Here is the app.component.html, This is my navigation that serves up page A.

<header class="row">
  <ul class="col-md-9 col-lg-8 col-lg-offset-1 ">
    <li><a routerLink="placeHolder">Official Data</a></li>
    <li><a routerLink="blueprint-detail">AY2017-2018</a></li>
  </ul>
</header>

<router-outlet></router-outlet>

Here is page A.html

<ul>
    <li *ngFor="let items of outcomeMenu" id="a"><a routerLink="{{items.routerLink}}" routerLinkActive="active"> {{items.title}} <span>
          <svg height="15" width="20">
            <circle cx="9" cy="7" r="6" fill="#7ED321" />
          </svg>
          {{items.status}}</span></a>
    </li>
</ul>

<router-outlet></router-outlet>

Finally, here is my routing module. components such as ExecutiveSummaryComponent are the sidebars I am talking about.

const blueprintDetailRoutes: Routes = [
  {   
    path: 'blueprint-detail',
      component: BlueprintDetailComponent,
      children: [
          { path: 'executive-summary', component: ExecutiveSummaryComponent},
          { path: 'mvv', component: MvvComponent},
          { path: 'unit-goal-management', component: UnitGoalManagementComponent}
      ]
    },
    {   
    path: 'placeHolder',
      component: PlaceHolderComponent,
    }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      blueprintDetailRoutes,
      { enableTracing: true }
    )
  ],
  exports: [
    RouterModule
  ]
})

The navigation router works as expected, but when I try and click on one of the list items I get that error. The *ngFor and items.routerLink is working fine, when I break this down to just the page A router it serves the sidebars fine.

Thank you for any help. and let me know if I can provide any more information

-UPDATE-

Based on feedback, I broke the router into two routers. The navigation router is working fine, however the sidebar router is providing the same error.

Side bar router

const blueprintDetailRoutes: Routes = [
  {   
    path: 'blueprint-detail',
      component: BlueprintDetailComponent,
      children: [
          { path: 'executive-summary', component: ExecutiveSummaryComponent},
          { path: 'mvv', component: MvvComponent},
          { path: 'unit-goal-management', component: UnitGoalManagementComponent}
      ]
    }
];

@NgModule({
  imports: [
    RouterModule.forChild(
      blueprintDetailRoutes
    )
  ],
  exports: [
    RouterModule
  ]
})
export class BlueprintDetailModule {}

Navigation Router

const navigationRoutes: Routes = [
   { path: 'blueprint-detail', component: BlueprintDetailComponent},
   { path: 'placeHolder', component: PlaceHolderComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      navigationRoutes,
      { enableTracing: true } 
    )
  ],
  exports: [
    RouterModule
  ]
})
export class NavigationRoutingModule {}

AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { BlueprintDetailModule } from './blueprint-detail-routing.module';
import { NavigationRoutingModule } from './app-routing.module';

import { BlueprintDetailComponent } from './blueprint-detail.component';
import { ExecutiveSummaryComponent } from './views/executive-summary.component';
import { MvvComponent } from './views/mvv.component';
import { UnitGoalManagementComponent } from './views/unit-goal-management.component';
import { PlaceHolderComponent } from './views/placeholder.component';


@NgModule({

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NavigationRoutingModule, // <-- Main Navigation router
    BlueprintDetailModule // <--Sidebar router
  ],
  declarations: [
    AppComponent,
    BlueprintDetailComponent,
    ExecutiveSummaryComponent,
    MvvComponent,
    UnitGoalManagementComponent,
    PlaceHolderComponent
  ],
  providers: [],
  exports: [
    RouterModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Hamed Baatour Hamed Baatour · Accepted Answer · 2017-10-06T18:30:20

I think your blueprintDetailRoutes does not refer to your root application routes so you should not be calling RouterModule.forRoot instead you should be using RouterModule.forChild as the Angular docs state:

Call forRoot only in the root application module, AppModule. Calling it in any other module, particularly in a lazy-loaded module, is contrary to the intent and can produce a runtime error.

Furthermore, you should verify that you are passing the right string to the routerLink attribute which I cannot help in here as you didn't post your component in the question. Plus, please use property binding instead of interpolation when binding values to attributes [routerLink]="items.routerLink" instead of routerLink="{{items.routerLink}}".

Angular 2 Router Outlet Children

1 Answers