Nsryjdtyk

I have the following issue using Angular 6. What I'm trying to do is to wait some promises to be resolved in order to do something else. Here is what I have and it's working:

AppService.ts

import { Injectable } from '@angular/core';



@Injectable({

  providedIn: 'root'

})

export class AppService {



  p1: Promise<any>;

  p2: Promise<any>;



  constructor() { 

    this.getPromise1();

    this.getPromise2();

  }



  getPromise1() {

    this.p1 = new Promise((resolve, reject) => {

      resolve(true);

    });

  }



  getPromise2() {

    this.p2 = new Promise((resolve, reject) => {

      setTimeout(() => resolve(true), 5000);

    });

  }

}

AppComponent.ts

import { Component, AfterViewInit } from '@angular/core';

import { AppService } from './app.service';



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent  implements AfterViewInit {



  constructor(private appSrvc: AppService) { }



  ngAfterViewInit(){

    Promise.all([this.appSrvc.p1, this.appSrvc.p2])

      .then(values => { 

          console.log(values);

          //If all promises resolved then execute something here

      })

      .catch(error => { 

          console.log(error.message)

      });

  }

}

Now when I edit the following it's not working:

AppService.ts

 constructor() { 

    this.initialize();

  }



  initialize(){

    setTimeout(() => {

      this.getPromise1();

      this.getPromise2();

    }, 1000);

  }

  ...

When I call the same promises from another method with a timeout event they don't work and I can't understand why. Can anyone help me with this.

Thanks in advance

What happens is:

1. 
   AppService constructor is called at the moment of it's injection into the module


2. Few ms after that the AppComponent is injected


3. About 100 ms later AppComponent=>ngAfterViewInit() is called

When you set the timeout, the initialization of those two promises is postponed 1000ms. At that point your AppComponent=>ngAfterViewInit() is already done and values of those two what-will-be promises is actually undefined. To fix this you need to sync those two events, thus calling AppService.initialize() from AppComponent will do the trick but you also must make it async.

Here's an example how you can sync this:

getPromise1() {

    if(!this.p1) {

        return this.p1 = new Promise((resolve, reject) => {

            resolve(true);

        });

    }

    return this.p1;

}

getPromise2() {

    if(!this.p2) {

        return this.p2 = new Promise((resolve, reject) => {

          setTimeout(() => resolve(true), 5000);

        });

    }

    return this.p2;

}

And then at the call site:

ngAfterViewInit(){

    Promise.all([this.appSrvc.getPromise1(), this.appSrvc.getPromise2()])

        .then(values => { 

                console.log(values);

                //If all promises resolved then execute something here

        })

        .catch(error => { 

                console.log(error.message)

        });

}