#angular #angular-universal #angular-service-worker
#angular #angular-универсальный #angular-service-worker
Вопрос:
У меня есть приложение Angular Universal, использующее этот вызов в командной строке
ng add @nguniversal/express-engine —clientProject myapp
Я создаю AboutComponent. И я даю этому компоненту собственный заголовок, используя заголовок из «@angular / platform-browser».
Итак, это работает! В командной строке я использую
сборка запуска npm: ssr
служба запуска npm: ssr
а затем проверьте источник представления в Chrome Dev Tools и посмотрите другое название страницы about.
Затем я добавляю работника службы, используя
ng добавить @angular/pwa
Я снова запускаю npm run build: ssr и npm run serve: ssr, и теперь источник представления в Chrome Dev Tools для страницы about показывает заголовок из индекса вместо конкретного заголовка AboutComponent.
Есть ли какой-нибудь способ заставить Universal сохранять отдельные заголовки для каждой страницы, а также иметь service worker?
Вот мой github: https://github.com/flocela/univ-servworker
Спасибо.
РЕДАКТИРОВАТЬ: вот мой файл about.component.ts:
import { Component, OnInit } from '@angular/core';
import {Title} from '@angular/platform-browser';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.sass']
})
export class AboutComponent implements OnInit {
constructor(private title: Title) { }
ngOnInit() {
this.title.setTitle('About');
}
}
Комментарии:
1. вы пытались установить заголовок страницы при инициализации каждого контроллера?
2. @FarukT Я установил заголовок в about.component.ts. Это мой единственный компонент, кроме компонента приложения. Я добавил код к своему вопросу.
3. Просто хочу подтвердить, вы пытались отменить регистрацию service worker, а затем зарегистрироваться снова? И посмотрите, работает ли это?
4. В зависимости от того, что service worker можно использовать для кэширования страниц. Таким образом, service worker может содержать другие данные, отличные от new. И одновременное аннулирование / отмена регистрации может привести к обновленному результату. Конечно, отмена регистрации — неправильный способ отображения обновленных данных. Но таким образом мы фактически пытаемся исследовать основную причину проблемы.
5. Привет @SumitParakh. Вы имеете в виду отмену регистрации service worker с помощью инструментов разработчика Chrome? Когда я отменяю регистрацию работника службы в инструментах разработчика Chrome, заголовок «About» отображается в источнике представления. Я не вижу, как снова зарегистрировать Service Worker, кроме повторной загрузки приложения.
Ответ №1:
Поскольку Service worker уже запущен в браузере, поэтому, если вы просмотрите «view-source», он вернет локальный кеш index.html файл вместо SSR. В основном ваш SSR работает, но вы не можете просмотреть его в браузере bcz кэша PWA. Используйте «Post man» или команду curl или любой REST-клиент, чтобы получить скомпилированный SSR-файл. Он должен возвращать ожидаемый источник представления.
Для лучшей проверки просто попробуйте поделиться ссылкой на свою страницу (надеюсь, она живая) на любом сайте социальной сети, например FB, и вы увидите заголовок в предварительном просмотре ссылки там.
Комментарии:
1. Спасибо Sumit! Вы уже ответили на вопрос, но мне было интересно, просматривают ли поисковые системы исходную страницу просмотра в браузере или то, что возвращает curl.
2. Для других людей, которые могут столкнуться с этими вопросами. Команда curl, которую я использовал, — curl localhost: 4000 / about .
3. @flobacca. Возможно, вам также придется добавить некоторые мета-теги для лучшей видимости в поисковой системе. Посмотрите на это для получения более подробной информации:- blog.getresponse.com /…