Page is getting generated without data

🐞 Bug report

I have read access on services but page is getting generated without data

Description

Below is angular code. Getting called in ngInit

this.subSink.add(
      this.faqService.getAll().subscribe(
        (f) => {
          this.panels = f.map((x) => ({ active: false, ...x }));
        },
        (error) => {
          console.error(error);
        }
      )
    );

faq service is fetching data from firestore. That have universal read access.

🔬 Minimal Reproduction

💻Your Environment

Angular Version:

11.0.9

Scully Version:

^1.0.0

🔥 Exception or Error

[SanderElias]

@kunjee17 The problem is that your firebase driver runs outside of ngZone. Because of that, Scully does extract the HTML before the data is available. For use-cases like this, we have a manualIdle control. That way, you can tell Scully when the page is ready. I did a PR to your reproduction that show how that would work. first I updated your component to this:

@Component({
  selector: 'app-faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.less'],
})
export class FaqComponent {
  loading = true;
  panels$ = this.tss
    .useScullyTransferState(
      'faq',
      this.faqService.getAll().pipe(
        take(1), // as it is hot, we need to take only the first one
        /**
         * as firebase runs outside of zone, we need to manually tell Scully the page is "ready"
         * the setTimeout makes sure Angular has some time to paint the page, before we
         * will "scrape"
         */
        tap(() => setTimeout(() =>this.ims.fireManualMyAppReadyEvent(),10)), //
      )
    )
    .pipe(
      tap(() => (this.loading = false)),
      /** if you want to subscribe to future updates you can merge the 'hot'
       * service back in, or use a subject to push to. */
      // mergeMap(()=> this.faqService.getAll()),
      map((faq) => faq.map((x) => ({ active: false, ...x } as Panel)))
    );
  constructor(
    private faqService: FaqService,
    private tss: TransferStateService,
    private ims: IdleMonitorService
  ) {}
}

And in your config file I updated the route to use ManualIdele checking. like this:

  routes: {
    '/faq': {
      type: 'default',
      manualIdleCheck: true
   },
  },

After those changes, your app works like expected. I’m going to close this issue because there is no action Scully can take. I will reopen the issue if there is a reason to do so! Feel free to keep discussing in here. If you have more issues, don’t hesitate to open up a new issue.

[SanderElias]

@kunjee17 I’l work on this after I finish my current task