Search code examples
javascriptangularangular2-routingsystemjs

Angular 2 and SystemJS child route access error

I have a angular 2 app with this routes:

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 }

]

I have the <base href='/'> on my index.html file. Also, i have the <router-outlet> tag too on my component.

If i put on the browser:

http://localhost:8000/adminarea or http://localhost:8000/dashboard the page and the route is displayed normally. But if i put http://localhost:8000/adminarea/test1 then the page is broken with strange errors:

enter image description here

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:

http://localhost:8000/dashboard/xyz

But if i have { path: '**', component: DashboardComponent } should not redirect to my DashboardComponent (in case that is a 404 route)? Why my child route 'test1' don't work?

Can you help me please?

Solution

  • The problem was the named child <router-outlet>.

    On my child component i have a named router outlet <router-outlet name="adminarea"></router-outlet>. I remove the "name" and everything is working now. But i don't understand why.