Angular Renderer2 не рендерит элементы на SSR - PullRequest
Новая
       16

Angular Renderer2 не рендерит элементы на SSR

2 голосов
/ 13 июня 2019

Я пытаюсь добавить тег <link> на страницу head. Для этого я создал загрузчик-прослушиватель, внедрил RendererFactory2 и создал экземпляр Renderer2: 

  const renderer: Renderer2 = rendererFactory.createRenderer(document, {
    id: 'alternate_link_server_injector',
    encapsulation: ViewEncapsulation.None,
    styles: [],
    data: {}
  });

после этого я использую рендерер для вставки ссылок: 

  settingsSelectors.languages$
    .pipe(
      first(),
      switchMap((languages: SettingsLanguage[]) => forkJoin(
        languages.map(lang =>
          translRouteServ
            .translateRoute(router.url, lang)
            .pipe(map(url => ({ url, lang })))
        )
      )),
    )
    .subscribe(translates => {
      appendLinksToHead(translates, renderer, origin, document);
    });

...

function appendLinksToHead(
  translates: { lang: SettingsLanguage, url: string }[],
  renderer: Renderer2,
  origin: string,
  document: any
) {
  Array.from<HTMLLinkElement>(
    document.head.querySelectorAll('link[rel="alternate"][hreflang]')
  ).forEach(el => renderer.removeChild(document.head, el));

  translates.forEach(({ url, lang }) => {
    const link = renderer.createElement('link');

    renderer.setAttribute(link, 'rel', 'alternate');
    renderer.setAttribute(link, 'hreflang', lang.language);
    renderer.setAttribute(link, 'href', origin + url);

    renderer.appendChild(document.head, link);
  });
}

В браузере все работает хорошо. Но ссылки отсутствуют в ответе SSR. Я зарегистрировал результаты: document.head.querySelectorAll('link[rel="alternate"][hreflang]') на сервере и ссылки присутствуют на document на сервере ... но ссылки отсутствуют на источнике страницы ...

Может ли кто-нибудь помочь мне понять, почему?

ОБНОВЛЕНИЕ :

Зависимость: 

import { DOCUMENT } from '@angular/common';
...
export const alternateLinkInjectorFactoryServerDeps = [
  Router,
  TranslateRoutesService,
  DOCUMENT,
  SettingsSelectors,
  RendererFactory2,
  'ORIGIN_URL'
];
...