tree-shaking-server-side-code-10.ts

import { ɵɵdirectiveInject as directiveInject } from '@angular/core';

export class ArticleComponent {
  article$: Observable<Article>;

  constructor(route: ActivatedRoute, transferState: TransferState) {
    if (isPlatformServer(directiveInject(PLATFORM_ID))) {
      const meta = directiveInject(Meta);
      const http = directiveInject(HttpClient);

      this.article$ = route.params.pipe(
        switchMap(params =>
          http.get<Article>(`${environment.apiUrl}/api/article/${params.id}`),
        ),
        tap(article => {
          meta.addTags([
            {
              property: 'og:type',
              content: 'article',
            },
            {
              property: 'og:title',
              content: article.title,
            },
            {
              property: 'og:url',
              content: article.url,
            },
            {
              property: 'og:image',
              content: article.image,
            },
          ]);

          const key = makeStateKey<Article>(`article:${article.id}`);
          transferState.set(key, article);
        }),
      );
    } else {
      this.article$ = route.params.pipe(
        map(params => {
          const key = makeStateKey<Article>(`article:${params.id}`);
          const article = transferState.get(key, null!);
          return article;
        }),
      );
    }
  }
}