2

I am implementing an Angular Universal application.

I want to transferState data from the back-end to the front-end of my application. Unfortunately, I am retrieving data in the back-end outside of the Angular app (retrieval of data doesn't trigger the change detection), and in the callback function, I can manipulate data which I retrieve. Then I am trying to resolve given Observable in the Resolver class

That's how my function looks like:

public someFunction(): Observable<string> {
    const key: StateKey<string> = makeStateKey<string>('myToken');

    return Observable.create(subject => {
      if (isPlatformServer(this.platformId)) {
        this.performTaskOutsideAngular((err, resp) => {
          this.transferState.set(key, resp.value);
          subject.next(resp.value);
          subject.complete();
        });
      } else {
        subject.next(this.transferState.get(key, 'null'));
        subject.complete();
      }
    });
}

How can I inform angular, that it should wait for the given task to finish? I am looking for something like:

public someFunction(): Observable<string> {
    const key: StateKey<string> = makeStateKey<string>('myToken');

    return Observable.create(subject => {
      if (isPlatformServer(this.platformId)) {

        this.ngZone.manualChangeDetection((appRef) => {

            this.performTaskOutsideAngular((err, resp) => {
              this.transferState.set(key, resp.value);
              subject.next(resp.value);
              subject.complete();
              appRef.tick();
            });
        });
      } else {
        subject.next(this.transferState.get(key, 'null'));
        subject.complete();
      }
    });
}

EDIT:

Some investigation:

public someFunction(): Observable<string> {
    const key: StateKey<string> = makeStateKey<string>('myToken');

    return Observable.create(subject => {
      if (isPlatformServer(this.platformId)) {
        this.performTaskOutsideAngular((err, resp) => {
          this.transferState.set(key, resp.value);
          subject.next(resp.value);
          subject.complete();
        });
      } else {
        subject.next(this.transferState.get(key, 'null'));
        subject.complete();
      }
    });

    setTimeout(() => {
         console.log('set timeout causes the Angular Universal to wait, before resolivng parameters');
    }, 10000);
}
Maciej Treder
  • 11,866
  • 5
  • 51
  • 74
  • why not use `this.zone.runOutsideAngular` – Sachila Ranawaka Dec 31 '18 at 13:36
  • I tried. But have no idea how to inform angular, that it should wait until certain moment to execute the change-detection / resolver that returns the value. – Maciej Treder Dec 31 '18 at 13:48
  • angular zone has methods: like `isStable` & `onStable` they might be helpful in your case. – alt255 Dec 31 '18 at 13:51
  • 1
    You can refer the answer which is given here: https://stackoverflow.com/questions/40300635/angular-2-runoutsideangular-still-change-the-ui . Please check and let me know if you are facing a problem. – Rock Dec 31 '18 at 13:52
  • @Rock I saw this, while I was looking for an answer. Unfortunately, this is not a solution for my case. I want to force Angular to wait for data retrieval. If I would have a method which will wait until I manually rin the `tick` it would be perfect. – Maciej Treder Dec 31 '18 at 13:58

0 Answers0