Scully: Random Rendering Behaviour

[msprogramando]

Hi, there is a strange behaviour in my app and I don't know what I am doing wrong. I would say 20% of the rendering succeeds but most of the time the markup is missing in the html file.

There are two scenarios at the moment.

1. Fetching data directly from node server
2. Fetching data via plugin to discover routes

Scenario 1
Inside ngOnit the component queries data from my nodejs server.

  ngOnInit() {    
    this.apollo.use('data')
      .watchQuery<brands>({
        query: brandsQuery
      })
      .valueChanges
      .pipe(map(res => res.data))
      .subscribe((brands) => {
        this.brands = brands
    })
  }

Template file

<div class="content">
    <app-brands [brands]="brands"></app-brands>  <!-- Works sometimes -->
</div>

Scenario 2
To discover all routes I have implemented a custom plugin in my scully.config

const brandSlugPlugin = async (route, options) => {
  // Testing ...
  return [
      {route: '/brands/adidas'},
      {route: '/brands/puma'},
      {route: '/brands/test'}
  ]
};

const validator = async conf => [];
registerPlugin('router', 'brandSlugs', brandSlugPlugin, validator);

exports.config = {
projectRoot: "./src/app",
outFolder: './dist/static',
  routes: {
    '/brands/:brand': {
      type: 'brandSlugs',
    }
  }
};

Inside the brand details component I add a component tree of components to a ViewContainerRef. Placing the subscriptions in the constructor or ngOnit has no effect.

export class BrandDetailsComponent implements OnInit {
  public slug = this.route.params.pipe(
    pluck('brand')
  )

  private componentService : ComponentService
  private brandSubscription : Subscription
  private slugSubcription : Subscription

  @ViewChild('container', {read: ViewContainerRef}) vcRef: ViewContainerRef;

  constructor(
    public apollo: Apollo,
    private route: ActivatedRoute,
    public resolver: ComponentFactoryResolver,
    private brandService: BrandService
    ) {
      this.componentService = new ComponentService(this.apollo, this.vcRef, this.resolver)
  }

  ngOnInit() {
  }

  ngAfterViewInit(){
    this.slugSubcription = this.slug.subscribe((slug) => {
      this.brandSubscription = this.brandService.fetchBrand(slug).subscribe((elements) => {
        this.componentService.createComponentTree(elements.data.BrandItem.content.body, this.vcRef)
      })
    })
  }

  ngOnDestroy(){
    this.brandSubscription.unsubscribe()
    this.slugSubcription.unsubscribe()
  }
}

Template file

<div class="content" id="content">
    <h1>{{slug | async}} works!</h1> <!-- Works always -->
    <div #container></div> <!-- Works sometimes -->
</div>

Thanks for your feedback.

[SanderElias]

We looked into this, and there is a strong indicator that the Appollo client is working outside of zoneJs.
As that is the way we detect page-ready, this is the problem.
You can test this, by removing the IdleMonitorService from your app.component. This will slow things down because now every page is waiting for a 25 seconds timeout.
When this solves the problem it is a zoneJs issue.
Please let us know

[msprogramando]

@SanderElias thanks for your comment. When I remove the IdleMonitorService from my app component scully renders all routes perfectly. Your Assumption was correct.

[SanderElias]

I was a bit afraid of this. I'm going to discuss this in our team, and see if we can provide (if this is even possible at all) a helper tool, so you can manually tell that you are ready.
This means you need to adapt some things in your application.

Also, I will investigate an alternative, to see if we can talk to Appollo to find out if it's idle. When that is possible we might be able to look into that.

The timeout will work for now, but it does slow down things a bit.

[msprogramando]

@SanderElias thanks for your comment. The workaround is ok for the moment. My app ist still very small and I can try things out. If you need any further information / support just let me know.

[SanderElias]

By the power of pr #344 this has an answer now.
If you have a problem like this, use the manual Idle option to deal with it.