Angular2: Can't get data from service after refreshing page on child component

Question

here's my router configuration:

[
  {
    path:'home',
    component: HomeComponent
  },
  {
    path:'hikes',
    children: [
      {
        path: '',
        component: HikeListComponent
      },
      {
        path: 'hikes/:name',
        component: HikeDetailComponent,
        children: [
         {
           path: 'races',
           children: [
             {
               path:'',
               component:  RaceListComponent,
               resolve: { hike: 'hike'}
             },
             {
               path:':id',
               component: RaceDetailComponent
              }
           }
         ]
       }
    ]
  }
]

Problem:To resolve the list of races in my RaceListComponent ( 'hikes/:name/races' ) i need the hikes' name previously resolved in its parent component: HikeDetailComponent ( 'hikes/:name'). Because of "router-outlet" directive i've decided to use a Hikeservice to pass/retrieve data on component init, and it works. But if i refresh the browser when on child component route('hikes/:name/races') that hikes'name is "undefined" so i can t resolve my racesList anymore.

Solution?: I implemented a simple resolver that is supposed to pass data retrieved from my HikeService:

import { HikeService } from '../Services/contexte.service';

@Injectable()
export class HikeResolver implements Resolve<any> {

  constructor( private hikeService:HikeService){}

  resolve() {
   return this.hikeService.getHike();
  }

}

Here's my simple HikeService:

@Injectable()
export class HikeService {
 constructor() { }
   public hike;
   public getHike(): void {
    return this.hike;
   }
 }

HikeService.hike is fueled by my parent component on init:

this.hikeService.hike = this.hike;

Now in my child component (RaceComponent) i can get data from the resolver:

let hikeId = this.route.snapshot.data['hike'].properties.id;

But Still, if i refresh the browser on my child component page, i get an exception:

error_handler.js:50 EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'properties' of undefined
TypeError: Cannot read property 'properties' of undefined at RaceComponent.ngOnInit (http://127.0.0.1:4200/main.bundle.js:3872:62) at Wrapper_RaceComponent.ngDoCheck (/AppModule/RaceComponent/wrapper.ngfactory.js:24:53) at CompiledTemplate.proxyViewClass.View_RaceComponent_Host0.detectChangesInternal (/AppModule/RaceComponent/host.ngfactory.js:28:37) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://127.0.0.1:4200/vendor.bundle.js:90216:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://127.0.0.1:4200/vendor.bundle.js:90411:44) at ViewRef_.detectChanges (http://127.0.0.1:4200/vendor.bundle.js:64392:20) at RouterOutlet.activate (http://127.0.0.1:4200/vendor.bundle.js:74782:42) at ActivateRoutes.placeComponentIntoOutlet (http://127.0.0.1:4200/vendor.bundle.js:25870:16) at ActivateRoutes.activateRoutes (http://127.0.0.1:4200/vendor.bundle.js:25837:26) at http://127.0.0.1:4200/vendor.bundle.js:25773:58 at Array.forEach (native) at ActivateRoutes.activateChildRoutes (http://127.0.0.1:4200/vendor.bundle.js:25773:29) at ActivateRoutes.activateRoutes (http://127.0.0.1:4200/vendor.bundle.js:25838:26) at http://127.0.0.1:4200/vendor.bundle.js:25773:58 at Array.forEach (native)

Santanu Biswas Santanu Biswas · Accepted Answer · 2017-01-13T12:38:44

For such cases where you want the child component to wait till the data for it is ready, you can use Angular2 Route Resolve.

Following link may be useful:

Resolving Route Data in Angular2

Angular2: Can't get data from service after refreshing page on child component

1 Answers