Как запретить Angular загружать контент во время выполнения, когда он уже был предварительно обработан Скалли?

Question

У меня есть служба, которая извлекает данные из безголового пульта управления CMS в моем приложении Angular. Я использую Скалли, чтобы отобразить мои страницы. Он отлично работает при предварительном просмотре, извлекает время сборки контента и создает страницу c, однако при открытии страницы Angular загружает эти данные снова, хотя это должно происходить из некоторого скучного контекста.

Answer 1

После просмотра исходного кода Скалли мне удалось найти там полезный сервис: TransferStateService. Поэтому я изменил свой сервис, чтобы использовать его для своего преимущества в своем сервисе, который выбирает данные из кабины:

private getCockpitData<T>(path: string): Observable<T> {
    const url = `${this.baseApiUrl}${path}`;
    const urlHash = btoa(url);
    if (isScullyRunning()) {
      const headers = new HttpHeaders({ 'Cockpit-Token': environment.cockpit.apiccessToken });
      const queryParams = new HttpParams({ fromObject: { lang: 'uk' } });
      return this.http
        .get<T>(url, { headers, params: queryParams })
        .pipe(
          tap(data => this.transferStateService.setState<T>(urlHash, data)),
          shareReplay(1)
        );
    }
    return this.transferStateService.getState<T>(urlHash).pipe(shareReplay(1));
}

Так что, когда Скалли работает, мы выбираем данные и с побочным эффектом используем TransferStateService для установки данных на стр. В противном случае, когда это уже сгенерированная страница, мы просто возвращаем эти данные со страницы, а не выполняем другой запрос. Тогда любая конечная точка может просто вызвать этот метод, например:

getHeaderContentData(): Observable<HeaderContent> {
  return this.getCockpitData<HeaderContent>('singletons/get/header');
}

Так что при загрузке данных с использованием сервиса все мои компоненты будут получать правильные данные с одинаковым интерфейсом и внутренне обрабатывать источник, откуда поступают данные.

Важное замечание: убедитесь, что вы также где-то впрыснули IdleMonitorService, например, в AppModule, например:

export class AppModule {
  // @ts-ignore Property 'idle' is declared but its value is never read.
  // IdleMonitorService has to be injected so that the instance of it is created
  // which allows scully to track wether angular page became idle in build time
  constructor(private readonly idle: IdleMonitorService) {}
}

Если IdleMonitorService нигде не введено Angular никогда не создает свой экземпляр и Скалли не может отследить, когда angular становится бездействующим во время предварительного рендеринга, что приводит к гораздо большему времени сборки, а также он пропустит window['ScullyIO'], установленный в 'generated', поэтому isScullyGenerated() всегда будет возвращаться false во время выполнения.

РЕДАКТИРОВАТЬ: с версии 0.0.15 из @scullyio/ng-lib IdleMonitorService больше не нужно вводить в AppModule, теперь требуется только импорт ScullyLibModule вместо.