(Angular 6) Angular Universal - Not waiting on content API call

Question

Cannot get SSR to work when using Angular Universal with pages that use dynamic content. All other pages work and the dynamic pages return with HTML but do not include the d

Answer 1

It seems that angular universal doesn't wait for async calls to render.

I had the same problem and finally made it work using ZoneMacroTaskWrapper as mentioned in this issue.

This is the service I made.

Answer 2

Try to edit your code as follows:

async ngOnInit() {
  const div = this.renderer.createElement('div');
  const texttest = this.renderer.createText('this works');

  this.renderer.appendChild(div, texttest);
  this.renderer.appendChild(this.content.nativeElement, div);

  this.createLinkForCanonicalURL();

  const posts = await this._contentfulService.getBlogPosts();
  this.blogPosts = _.orderBy(posts, ['sys.createdAt'], ['desc'])

 }

Answer 3

You need use TransferHttpCacheModule for wait HTTP call to API or use another implementation that work with TransferState like ngx-transfer-http .

My sample with wait 3-second delay: https://github.com/Angular-RU/angular-universal-starter/blob/master/src/app/transfer-back/transfer-back.component.ts