title: Angular 2 and SystemJS child route access error
body: <p>I have a angular 2 app with this routes:</p>
  
  <pre><code>export const MODULE_ROUTES: Route[] =[
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] },
      { path: 'user', component: UserComponent, canActivate: [AuthGuard] },
      { path: 'table', component: TableComponent, canActivate: [AuthGuard] },
      { path: 'icons', component: IconsComponent, canActivate: [AuthGuard] },
      { path: 'notifications', component: NotificationsComponent, canActivate: [AuthGuard] },
      { path: 'typography', component: TypographyComponent, canActivate: [AuthGuard] },
      { path: 'maps', component: MapsComponent, canActivate: [AuthGuard] },
      { path: 'upgrade', component: UpgradeComponent, canActivate: [AuthGuard] },
      { path: 'calendar', component: CalendarComponent, canActivate: [AuthGuard] },
      { path: 'login', component: LoginComponent },
      { path: 'unauthorized', component: UnauthorizedComponent },
      { path: 'adminarea',component: AdminareaComponent, canActivate: [AuthGuard],
      children: [
          {
              path:'test1', component: CalendarComponent
          }
      ] },
      { path: '**', component: DashboardComponent }
  
  ]
  </code></pre>
  
  <p>I have the <code>&lt;base href='/'</code>> on my <strong>index.html</strong> file. Also, i have the <code>&lt;router-outlet&gt;</code> tag too on my component.</p>
  
  <p>If i put on the browser:</p>
  
  <p><code>http://localhost:8000/adminarea</code> or <code>http://localhost:8000/dashboard</code> the page and the route is displayed normally. But if i put <code>http://localhost:8000/adminarea/test1</code> then the page is broken with strange errors:</p>
  
  <p><a href="https://i.stack.imgur.com/yIKgm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yIKgm.png" alt="enter image description here"></a></p>
  
  <p>If i put any sub route (or child) of any parent on my browser address bar then  got this same error and behavihor. For example:</p>
  
  <pre><code>http://localhost:8000/dashboard/xyz
  </code></pre>
  
  <p>But if i have <code>{ path: '**', component: DashboardComponent }</code> should not redirect to my DashboardComponent (in case that is a 404 route)? Why my child route 'test1' don't work?</p>
  
  <p>Can you help me please? </p>