Angular 5 Resolve does not deliver the data before the window load

Currently I have developed a simple user interface to allow the user to select a value from a drop-down list to redirect it to different URLs. The problem that arises is that the asynchronous call always delivers the data after it has finished loading the html of the drop-down, so even if the data is delivered to the form, the list is never filled with the data received.

Initially I used a call to the endpoint of an api that delivers the data using a service in angular and in the tests of my laptop it worked correctly, but when searching for a cloud service in the cloud (mLab specifically) it did not I find a way to make it work.

Reading, I found the solution to use a resolver that allows you to bring the data first and then load the page, I really do not know what I'm doing wrong but it still does not work. I leave my code to see if I do something wrong and can help me.

docs-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import 'rxjs/add/operator/toPromise';
import swal from 'sweetalert2';
import { DocumentationService } from '../documentation.service';
import { Logger } from '../logger.service';

@Component({
    selector: 'app-docs-list',
    templateUrl: './docs-list.component.html',
    styleUrls: ['./docs-list.component.css']
})
export class DocsListComponent implements OnInit {

  urlSelected = '';
  docsAvailable = [
    {name: 'Seleccione una opción ...', url: '', group: '', order: 0},
  ];
  groups = [];

  constructor(private router: Router,
              private route: ActivatedRoute,
              private http: HttpClient,
              private documentationService: DocumentationService) { }

  ngOnInit() {
    console.log('EJECUTADO EL INIT DE LA PAGINA');

    this.docsAvailable = this.route.snapshot.data['docs'];
    console.log(this.docsAvailable);
  }

  onChange(value) {
    // console.log(value);
    this.urlSelected = value;
  }
}

** documentation-resolver.service.ts **

 import { Injectable } from '@angular/core';
 import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { DocumentationService } from './documentation.service';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';

 @Injectable()
 export class DocumentationResolver implements Resolve<any> {
    constructor(
        private documentationService: DocumentationService,
        private router: Router
    ) { }

    resolve(route: ActivatedRouteSnapshot): Observable<any> {
        console.log('EJECUTANDO EL OBSERVABLE ...');
        return this.documentationService.getDocs().map(user => {});
    }
}

** documentation.service.ts **

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import { Logger } from './logger.service';

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class DocumentationService {

  constructor(
    private http: HttpClient,
    private logger: Logger) { }

  getDocs(): Observable<any> {
    console.log('IMPRESION DESDE EL SERVICIO ...');
    return this.http.get('documents');
  }

}

Thanks in advance.

UPDATE: I'm missing an important part of the file:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { DocsListComponent } from './docs-list/docs-list.component';
import { FormsModule } from '@angular/forms';

import { Logger } from './logger.service';
import { DocumentationService } from './documentation.service';
import { DocumentationResolver } from './documentation- 
    resolver.service';

const appRoutes: Routes = [
  { path: '',
     component: DocsListComponent,
    resolve: {
       docs: DocumentationResolver
    }
  }
];

@NgModule({
  declarations: [
    AppComponent,
     DocsListComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes,
      {enableTracing: true}
    )
  ],
   providers: [
     Logger,
     DocumentationService,
     DocumentationResolver
   ],
   bootstrap: [
     AppComponent
   ]
 })
 export class AppModule { }

There are shown the routes and the definition of the resolver as provider.