<router-outlet></router-outlet> empty after calling Resolve<any>

[farrukh-whitecoat]

router-outlet empty after calling Resolve in AppResolver class. loaded data show on page when i see as a page view source. html does now render in router-outlet

[farrukh-whitecoat]

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { HomeComponent } from './home/home.component';
import { AppResolver } from './app.resolver';

const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'fetch-data', component: FetchDataComponent, resolve: { cres: AppResolver } }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

component:
constructor(private route: ActivatedRoute, private httpClient: HttpClient, @Inject('BASE_URL') baseUrl, private practiceService: PracticeService) {

this.route.data.map(data => data.cres).subscribe((practice: Practice) => {
  console.log(practice);
  this.initPracticeDetails(practice);
  //this.forecasts = res;
 });

}

app resolver

import { Injectable, Inject } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';
import { HttpClient } from '@angular/common/http';
import { Practice } from './interfaces/Practice';
import { map } from 'rxjs-compat/operator/map';
import { PracticeService } from './services/practice.service';

@Injectable()
export class AppResolver implements Resolve {

url: string;
constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl, private practiceService: PracticeService) {
this.url = baseUrl;
}

resolve(route: ActivatedRouteSnapshot, rstate: RouterStateSnapshot): Observable | Promise | any {

return this.http.get(`api/practice/945076/956`);

}
}