1

estoy usando Angular 5 con angular-cli.

Querria saber como puedo ejecutar varias llamadas http antes de que el DOM este 'ready' y la aplicacion inicializada. Quiero saber estoy por que la aplicación es muy grande (Estoy haciendo lazy loading) y en las conexiones de red veo que pierdo tiempo que puedo usar para hacer las llamadas http mientras el DOM esta haciendo su trabajo.

Aqui lo podemos ver en las herramientas de desarrollador de chrome, en la pestaña network. problem

He intentado añadir un provider en el AppComonent como este:

{
  provide: APP_INITIALIZER,
  useFactory: (setup: SetupService) => () => setup.execute(),
  deps: [SetupService],
  multi: true
}

Y tambien hacerlo en el main.ts de esta forma:

setupSerice.setup().then(() => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));
});

El setupService es el que realiza las llamadas http

¿Que mas podria intentar o hacer?

Muchas gracias de antemano.

2
  • Hola @Arturo. Bienvenido a Stack Overflow en español. ¿Podrías traducir tu pregunta? El enlace para editar está al pie de la misma.
    – Mariano
    Commented el 14 dic. 2017 a las 20:27
  • 1
    Buenas @Mariano, ya lo he traducido al español. Gracias.
    – Arturo
    Commented el 14 dic. 2017 a las 20:51

2 respuestas 2

0

Dependiendo del tipo de llamadas que necesites hacer (con seguridad, alguna cabecera con token JWT, etc), lo que podrías hacer sería implementar WebWorkers, que es la forma de crear un hilo de ejecución para tratar de paralelizar operaciones pesadas. Pero ten precaución, porque un WebWorker no puede acceder al DOM, y necesitas coordinar ese "hilo" con el "hilo principal".

Por otro lado, es posible que un ServiceWorker también te sea de utilidad.

Si tienes dudas, deja tu pregunta en los comentarios.

-1

Para ejecutar un servicio antes y durante de la inicialización de la aplicación, debemos usar APP_INITIALIZER.

El marco le da acceso al token APP_INITIALIZER . Este token se define en el archivo application_init.ts

export const APP_INITIALIZER: any = new OpaqueToken('Application Initializer');

Para saber cómo usar este token, podes echarle un vistazo al servicio ApplicationInitStatus definido en el mismo archivo.

constructor(@Inject(APP_INITIALIZER) @Optional() appInits: (() => any)[]) {
}

El constructor de este servicio inyectará el token APP_INITIALIZER y su valor es una matriz de funciones. Estas funciones pueden ejecutar código síncrono o asíncrono. Para tareas asíncronas, estas funciones deben devolver el objeto Promesa , para que el marco sepa cuándo se resuelven todas las promesas.

A continuación te dejo un pequeño ejemplo, que simula la carga de una configuración para la pagina desde un servidor, para que se entienda mejor.

Primero la configuración de la petición HTTP en ConfigService:

@Injectable()
export class ConfigService {

    private _config: any;

    constructor(private http: Http){}

    load(): Promise<any>{
        return this.http.get('/api/config')
              .map( (response: Response) => response.json())
              .toPromise()
              .then(data => {
                  this._config = data;
                  return data;
               })
    }

    get config(): any {
        return this._config;
    }
}

A continuación, debes definir un proveedor para este servicio y agregar la llamada al método de carga al token APP_INITIALIZER . No te olvides del parámetro multi. Como este token es una matriz de funciones, este parámetro es obligatorio para agregar un nuevo valor a esta matriz.

@NgModule({
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: (configService: ConfigService) => function() {return configService.load()},
      deps: [ConfigService],
      multi: true
    }]
})
export class ApplicationModule { }
2
  • Eso no soluciona el problema, ya que no ejecuta esas llamadas hasta despues de tener el DOM listo. @Federico Madoery
    – Arturo
    Commented el 18 dic. 2017 a las 15:49
  • @Arturo luego de investigar encontré la solución, espero te funcione también. Disculpa la errónea respuesta de un principio. Saludos. Commented el 27 dic. 2017 a las 13:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.