Get data from Resolver into a Component using Angular 4 -

i'm struggling data resolver component. returning null.

i can see fetching data server, , displaying page template correctly, , has no errors, doesn't access data.

student.component.ts

import { component, viewchild } '@angular/core'; import {mdpaginator, mdsort} '@angular/material';  import { student, studentservice } '../shared';  import 'rxjs/add/operator/startwith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; import {activatedroute, router} "@angular/router";  @component({   selector: "student",   templateurl: './student.component.html',   styleurls: ['./student.component.scss'] })  export class studentcomponent {   constructor (     private route: activatedroute,     private studentservice: studentservice,     private router: router,   ) {}    students: student[];    displayedcolumns = ['userid', 'username', 'progress'];    @viewchild(mdpaginator) paginator: mdpaginator;   @viewchild(mdsort) sort: mdsort;    ngoninit() {     // retreive prefetched students     this.route.data.subscribe(       (data: { students: student[] }) => {         this.students = data.students;       }     );      console.log(this.students);   } } 

app.module.ts

import { browsermodule } '@angular/platform-browser'; import { modulewithproviders, ngmodule } '@angular/core'; import { browseranimationsmodule } '@angular/platform-browser/animations';  import { myangularmaterialmodule, headercomponent, sidebarcomponent, apiservice, sharedmodule } './shared'; import { activitymodule, activitycomponent } './activity'; import { studentmodule, studentcomponent } './student';  import { routermodule } '@angular/router';  import { appcomponent } './app.component'; import { studentresolver } "./student/student-resolver.service"; import {studentservice} "./shared/services/student.service";   const routes: modulewithproviders = routermodule.forroot([   {     path: 'student',     component: studentcomponent,     data: {       title: 'students'     },     resolve: {       students: studentresolver     }   },   {     path: 'activity',     component: activitycomponent,     data: {       title: 'activities'     }   },   { path: '',   redirectto: '/student', pathmatch: 'full' }, ]);  @ngmodule({   declarations: [     appcomponent,     headercomponent,     sidebarcomponent   ],   imports: [     browsermodule,     browseranimationsmodule,     myangularmaterialmodule,     sharedmodule,     activitymodule,     studentmodule,     routes   ],   providers: [apiservice, studentservice, studentresolver],   bootstrap: [appcomponent] }) export class appmodule { } 

student-resolver.service.ts

import { injectable, } '@angular/core'; import { activatedroutesnapshot, resolve, router, routerstatesnapshot } '@angular/router'; import { observable } 'rxjs/rx';  import { student, studentservice } '../shared';  @injectable() export class studentresolver implements resolve<student> {   constructor(     private studentservice: studentservice,     private router: router   ) {}    resolve(     route: activatedroutesnapshot,     state: routerstatesnapshot   ): observable<any> {      return this.studentservice.query()            .catch((err) => this.router.navigatebyurl('/'));    } } 

i didn't put student.service.ts here once working , fetching data (i can see on google chrome network tab). missing?

thanks!

update:_______________________________

my server returning following data:

[     {         "name": "luiz mitidiero",         "lastactive": "2017-06-05t08:40:51.620z",         "activitiescompleted": 12,         "performance": 89.85     },     {         "name": "jan",         "lastactive": "2017-05-28t08:40:51.620z",         "activitiescompleted": 5,         "performance": 78.4     },     {         "name": "katie",         "lastactive": "2017-06-13t08:40:51.620z",         "activitiescompleted": 20,         "performance": 99.99     } ]