title: Angular2 resolver returns undefined when the data service console logs the data fine
body: <p>I am trying to pre-fetch data before displaying the component by using angular2's resolver.  </p>
  
  <p>so in my data.service.ts: 
  I have a function that retrieves an employee detail: </p>
  
  <pre><code>  getEmployee(id:string) {
        let headers = new Headers();
        this.createAuthorizationHeader(headers);
        this.employeeUrl = 'someurl/property?'+'employee_number='+id;
        return this._http.get(this.employeeUrl, {headers})
          .map(resp =&gt; resp.json())
          .do(data =&gt; console.log('employee: ' +  JSON.stringify(data)))
  
  //this returns a json log in console. 
  </code></pre>
  
  <p>In my employee-detail-resolver.service.ts file i have set up a resolver like this: </p>
  
  <pre><code>@Injectable()
  export class EmployeeDetailResolver implements Resolve&lt;IEmployee&gt;{
    employee: IEmployee;
  
    constructor( private _dataService: DataService, private router: Router ) {}
  
    resolve(
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable&lt;IEmployee&gt; {
      console.log('returning resolved data');
      let id = route.params['id'];
      return this._dataService.getEmployee(id)
        .map(employee =&gt; {
          if(employee) {
          return employee;
        } else {
          this.router.navigate(['/employees']);
          return null;
        }
      });
  
  }
  
  }
  </code></pre>
  
  <p>and I try to get the data from the resolver in my employee-detail.component.ts file like this: </p>
  
  <pre><code>export class EmployeeDetailComponent implements OnInit {
    busy: Subscription;
    employee: IEmployee;
    id: string;
  
    constructor(private route: ActivatedRoute,
                private router: Router,
                private _dataService: DataService
                ) {
  
      }
  
  
    ngOnInit() {
      this.route.data
        .subscribe((data: {employee: IEmployee}) =&gt; {
          this.employee = data.employee;
        })
       console.log("testing employee detail:", this.route.snapshot.data['data']);
    // this logs undefined in the console
    }
  
    onBack(): void {
      this.router.navigate(['/employees']);
    }
  }
  </code></pre>
  
  <p>I know I'm getting the data accurately because I see it in the console, and my template with *ngIf="employee" loads with no data. I don't understand why my component returns undefined value..</p>
  
  <p>my routing module looks like this: </p>
  
  <pre><code>const APP_ROUTES: Routes = [
      {path: 'employee/:id', component: EmployeeDetailComponent,
        resolve: {
         employee: EmployeeDetailResolver
        }
      },
      {path: 'employees', component: EmployeesListComponent},
      {path: '', redirectTo: '/employees', pathMatch: 'full' }
  ];
  
  export const Routing = RouterModule.forRoot(APP_ROUTES, {useHash: true});
  </code></pre>
  
  <p>I have it declared as a provider in my app.module.ts:</p>
  
  <pre><code>  providers: [ DataService, EmployeeDetailResolver ],
  </code></pre>
  
  <p>can someone please help me understand what I am doing wrong??</p>
  
  <p>FIX: 
  in employee-detail.component.ts
  I changed to  </p>
  
  <pre><code>  ngOnInit() {
      this.employee = this.route.snapshot.data['employee'][0];
      console.log("working?",this.employee[0]);
    }
  </code></pre>
  
  <p>and now the data displays every time I click!
  It was snapshot!!! </p>