On Browser reload Angular js 2 nested routes component not loading

I have a routeconfig which creates a child route under a parent component, I noticed that all goes when I use (by clicking a href tag with the routelink set to the child route) a route link to access the nested route, but when I refresh the browser when on the child route or enter the child routelink directly in the browser it fails to load the child component i.e only the parent component loads.

url with issue – localhost:3000/#/dashboard/reservation

My route config is below

Main app component routes to parent component (Dashboard)

@RouteConfig([
  ...
  { path: '/dashboard/...', name: 'Dashboard', component: Dashboard}, 
  ...
])

Dashboard component creates child route
@RouteConfig([
  { path: '/reservation', name: 'Reservation', component: Reservation , useAsDefault: true},
]);

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

I had met the same issue but I resolved by using this code inside <head> of index.html.Its a bug with APP_BASE_HREF

<base href="/">
<!-- Set the base href -->
<script>document.write('<base href="'+ document.location +'"/>');</script>