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);
}