Particle JS is not working with SSR (Server Side Rendering) Angular and Scully

Question

In my angular Application, I have added Scully for server side rendering. I have added particle JS to add animated particles as background of my component.

When I run scully npx scully, It creates static index of all routes but when come to particular route where I have used Particle JS, It took time and gives error -

Puppeteer error while rendering "/web/creativeHand" TimeoutError: Navigation timeout of 30000 ms exceeded we retried rendering this page 3 times.

I tried adding serverTimeout but still giving the same error. also adding isPlatformBrowser(this.platformId) but nothing is fixing it. I want a solution where It should not render the particle JS at server side and only render when It is loading on browser

Answer 1

You can use the isScullyRunning method to check if you are in the Scully pre-rendering context

Template:

<div *ngIf="!isScullyContext">
   <!-- Particle JS Animation Code -->
</div>

Component:

import { isScullyRunning } from '@scullyio/ng-lib';
public isScullyContext = isScullyRunning()