title: Setting an observable variable in angular 2
body: <p>What we want to do is call an endpoint from a url which returns 2 variables which can be used on multiple sections on the site. Although we are using the http call and subscribing to it, in order to speed up the site we only want to make the api call once. In order to do this we have created an Observable on the a service. Service calls a function in the constructor which sets the values of the Observable, however sometimes when visiting a link directly a cannot subscribe to method of undefined is returned. This is using the Microsoft ADAL library example code is below:</p>
  
  <p><strong>Firstly we are setting the variable as an Observable in the service:</strong></p>
  
  <pre><code>@Injectable()
  export class MicrosoftGraphService {
    public details: Observable&lt;any&gt;;
  </code></pre>
  
  <p><strong>Then we are setting the observable values in the constructor:</strong></p>
  
  <pre><code>constructor(
  private _http:Http,
  private _adalService: AdalService,
  private _sanitizer:DomSanitizer
  ) {
  
  this.getToken().subscribe(token =&gt; {
    /**
     * Get me data from graph to determine school_id and mis_id
     */
    this.get('me', token, true).subscribe(me =&gt; {
      this.details = new Observable(observer =&gt; {
          observer.next({
            me: me
          });
          observer.complete();
      });
    });
  });
  </code></pre>
  
  <p><strong>The getToken function is:</strong></p>
  
  <pre><code>getToken(): Observable&lt;any&gt; {
      return this._adalService
        .acquireToken( this._adalService.config.endpoints.graph );
  }
  </code></pre>
  
  <p><strong>The get function is:</strong></p>
  
  <pre><code>get( endpoint, token, beta = false ): Observable&lt;any&gt;  {
    return this._http.get( this._adalService.config.endpoints.graph + 
      this.getVersion( beta ) + endpoint, {
        headers: new Headers({ "Authorization": "Bearer " + token })
      })
      .map(res =&gt; {
        return res.json();
      });
  }
  </code></pre>
  
  <p><strong>This is then called in the constructor of the component as follows:</strong></p>
  
  <pre><code>this._microsoftGraph.details.subscribe(details =&gt; {
      console.log(details);
  });
  </code></pre>
  
  <p>This should add a console log of the return of the me endpoint, however on certain pages it does and others it returns a cannot subscribe to undefined. The MicrosoftGraphService is called and set in the constructor on both pages correctly.</p>
  
  <p>I am wondering if this happens because of the way it's called and when it's set e.g. the visiting the base url would call the parent component, as the MicrosoftGraphService is called in that constructor it is initialised first, so is available when visiting the second component through navigation. However going directly to the URL location for the child component might mean it's called first before the parent, even though both load the MicrosoftGraphService.</p>
  
  <p><strong>Example of the routes if it helps:</strong></p>
  
  <pre><code>const routes: Routes = [
  {
      path: '',
      component: SiteComponent,
  canActivate: [LoggedInGuard],
  children: [
      { path: 'dashboard', component: DashboardComponent },
      { path: 'tasks', component: TasksComponent },
      {
        path: '',
        redirectTo: '/dashboard'
        , pathMatch: 'full'
        // , terminal: true
      }
    ]
  },
  </code></pre>