Angular Universal - ERROR ReferenceError: requestAnimationFrame is not defined

[CharlieGreenman]

When using this library with angular universal, I am getting the following error requestAnimationFrame is not defined.

[MurhafSousli]

Could you fill the issue template properly, which angular version are you using?

[CharlieGreenman]

Angular 15. Angular version here is irrelevant as well as node version, OS version etc. I might make a pull request tomorrow. Will keep you posted

[MurhafSousli]

It is important if it is a real issue, it should be documented which version of the library and which in angular version!

[CharlieGreenman]

Noted. I must have missed that. It's Angular Version 15 and "ngx-highlightjs": "^7.0.1",

[MurhafSousli]

For me, it works fine with Angular 15, I couldn't reproduce it, What is exactly the error?

[CharlieGreenman]

I will get to and try again today/tomorrow and report back. My apologies

[CharlieGreenman]

My apologies for the delay, still looking into it. Will confirm tomorrow if indeed an error, or something I did on my end.

[CharlieGreenman]

I was able to circle back to today as we finally got angular universal build working/deployed. The following is the error I am getting:

Generating browser application bundles (phase: emitting)...ERROR ReferenceError: requestAnimationFrame is not defined
    at requestAnimationFrame (./node_modules/rxjs/dist/esm/internal/scheduler/animationFrameProvider.js:19:105)
    at requestAsyncId (./node_modules/rxjs/dist/esm/internal/scheduler/AnimationFrameAction.js:14:64)
    at schedule (./node_modules/rxjs/dist/esm/internal/scheduler/AsyncAction.js:24:72)
    at schedule (./node_modules/rxjs/dist/esm/internal/Scheduler.js:8:57)
    at setTextContent (./node_modules/ngx-highlightjs/fesm2020/ngx-highlightjs.mjs:372:9)
    at highlightElement (./node_modules/ngx-highlightjs/fesm2020/ngx-highlightjs.mjs:336:14)
    at ngOnChanges (./node_modules/ngx-highlightjs/fesm2020/ngx-highlightjs.mjs:320:22)
    at call (./node_modules/@angular/core/fesm2020/core.mjs:1574:14)
    at callHook (./node_modules/@angular/core/fesm2020/core.mjs:2498:18)
    at callHooks (./node_modules/@angular/core/fesm2020/core.mjs:2457:17)
    ```
  
    It is being used as following in my `ui-common.module.ts` file:
    ```
    providers: [
      {
        provide: HIGHLIGHT_OPTIONS,
        useValue: {
          coreLibraryLoader: () => import('highlight.js/lib/core'),
          lineNumbersLoader: () => import('highlightjs-line-numbers.js'),
          languages: {
            typescript: () => import('highlight.js/lib/languages/typescript'),
            javascript: () => import('highlight.js/lib/languages/javascript'),
            scss: () => import('highlight.js/lib/languages/scss'),
            xml: () => import('highlight.js/lib/languages/xml'),
            css: () => import('highlight.js/lib/languages/css'),
          },
        },
      },
    ],
    ``` 

[PieterjanDeClippel]

Same here

ng add @nguniversal/express-engine

Configuration:

{
  provide: HIGHLIGHT_OPTIONS,
  useValue: <HighlightOptions>{
    fullLibraryLoader: () => import('highlight.js'),
    themePath: 'solarized-dark.css'
  }
},

[MurhafSousli]

I tried to replicate the issue with Angular Universal but it worked fine, I couldn't reproduce this error! Anyway, I added a check in the ngOnChanges just in case.

Please try again with v8.0.0 and let me know if it worked out!