title: Angular4: Reload data on refresh in app-wide singleton service
body: <p>Working on a small angular project with a few components that represent the views, the app has a home component which contains a list of items which when clicked load the views in the other(appropriate) components. The project has a service that provides data to all the components, this service loads the shared data from an API when the home component's  <code>ngOnInit() {}</code> method is called after which the data is available to every other component in the app.</p>
  
  <p>Now, my problem is when a user enters the full url path to any other component apart from the home component(usually due to hitting refresh while on this component), the data in the service is lost and the component has nothing to display. Is there a way to make the home component always load first even when a direct path to the component is entered into the url? Should I just always check  in every component if data has been loaded and load if not? Thank you</p>
  
  <p>Here is the source for the Home Component.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ServiceCodeService } from './service-code.service';
  import { ActivatedRoute, Router } from '@angular/router';
  
  @Component({
    selector: 'app-home-page',
    templateUrl: './home-page.component.html',
    styleUrls: ['./home-page.component.css']
  })
  export class HomePageComponent implements OnInit {
    private specialityList: string[];
    private route: ActivatedRoute;
    private router: Router;
    private svpList: string[];
  
    constructor(private serviceCodeService: ServiceCodeService, route: ActivatedRoute, router: Router) {
      this.route = route;
      this.router = router;
    }
  
    ngOnInit() {
      this.serviceCodeService.updateServiceCodesFromAPI().subscribe(
        servCodes =&gt; {
            this.specialityList = this.serviceCodeService.getAllSpecialities();              
        }
      );
    }
  
    specialitySelected(item: any) {
      this.router.navigate(['../speciality/'.concat(item)], {relativeTo: this.route});
    }
  
    svpSelected(item: any) {
      this.router.navigate(['../svp/'.concat(item)], {relativeTo: this.route});
  </code></pre>