Angular 6 Meta-сервис с динамическими метаданными из веб-сервиса

Я пытаюсь использовать данные, полученные из веб-службы, для обновления метаданных в универсальном приложении Angular 6 (обновление: теперь Angular 7) (с использованием Meta и Title). Я специально делаю это для карточек Twitter и Facebook. Я знаю, что их сканеры не выполняют JavaScript, поэтому я использую Angular Universal для установки метаданных на стороне сервера. Я использую Инструмент отладки Facebook Sharing, чтобы проверить результаты.

Я пробовал несколько разных подходов и искал примеры, но не нашел ни одного, где данные извлекаются из асинхронного вызова веб-службы до установки метаданных. (Обратите внимание, что я успешно использовал эту службу с веб-службой в приложении Angular Universal 4.)

Используя приведенный ниже код, тег «og: url» настроен правильно, так как он не требует вызова веб-службы для получения данных. Однако заголовок установлен неправильно. Если я перенесу вызов setTitle в ngOnInit и предоставлю строку, это будет работать, но получение данных из веб-службы - нет.

Я пробовал использовать службу для сбора данных, а затем устанавливать метаданные, но это тоже не работает. Я получаю данные от резольвера, но это не решает проблему Facebook / Twitter.

ngOnInit() {
    const metaUrl = 'https://www.test.com' + this._router.url;
    this._metaService.updateTag({ property: 'og:url', content: metaUrl });

    this._sub = this._route.params.subscribe(params => {
      const code = params['person'];
      this.getInfo(code);
    });
}

getInfo(code: string) {
  this._myWebService.getPerson(code).subscribe(
      data => {
        this._person = data;
        // set dynamic metadata
        const metaTitle = this._person.name + ' | site description';
        this._titleService.setTitle(metaTitle);
        this._metaService.updateTag({ name: 'twitter:title', content: metaTitle });
  });

}

Обновление: я также попытался использовать резолвер, чтобы сначала получить данные, чтобы я мог просто использовать его в onInit. Это не работает.

 { path: 'view/:person', component: ViewComponent,
    resolve: { person: ViewResolver }, data: { person: ViewResolver }
  }

Затем в onInit:

const data: any = this._routeActive.snapshot.data;
this.metaTitle = data.person.value.name;
this._metaService.updateTag({property: 'og:title', content: this.metaTitle });
this._metaService.updateTag({name: 'twitter:title', content: this.metaTitle });

Вы проверяли, что выполнение кода происходит на стороне сервера getInfo?

David 06.10.2018 09:09

Да, я проверил страницу, отображаемую на сервере, и все в порядке, включая метатеги в источнике. Однако, когда я развертываю приложение в Google App Engine, инструмент отладки Facebook не видит обновленные метатеги. Я даже добавил преобразователь, чтобы сначала получить данные, но он все еще не работает.

beachCode 06.10.2018 21:36

Что-то должно быть не так с Angular Universal, поскольку предоставленный код выглядит нормально. AU останавливает рендеринг, когда в ngZone больше нечего делать, возможно, вызов API выполняется за пределами ngZone? Может быть проблема с подключением? Возможно, наблюдаемый вызов API возвращается с ошибкой, которая может предоставить дополнительную информацию. Сервер AU работает локально? Вы можете легко проверить строку вывода на локальном компьютере. : размышление:: мышление:

Mezo Istvan 29.10.2018 17:22

Я согласен с вашей оценкой. Я проверил локально, и страница на стороне сервера верна (т. Е. Правильные теги находятся в источнике). Любые предложения о том, как отлаживать это в среде prod? Может мне стоит настроить страницу SSR на другой порт и проверить его таким образом? Спасибо!

beachCode 29.10.2018 17:34

Я бы предложил создать службу, которая вводится как зависимость от приложения SSR. Таким образом, вы сначала создаете и заполняете эту службу полностью на стороне сервера, а затем передаете все данные в render приложения SSR. Трудно контролировать асинхронные вызовы во время рендеринга, поэтому мы обнаружили, что хорошей практикой является разрешение всех данных заранее и передача им render для как можно меньшего количества дополнительных заданий. Я могу показать вам пример, если все еще интересно.

muradm 29.10.2018 21:39
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
10
5
2 146
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел решение. Решив, что это не проблема кода, я перешел к Угловой универсальный стартовый репо и обновил свою конфигурацию (например, tsconfig.json, angular.json и т. д.), Пока она не сработала. Мой проект обновлялся несколько раз, и я не скопировал все изменения из начального репозитория.

Другие вопросы по теме