Issue with CSS not rendering correctly in Angular application replays

Issues & Bugs
1

Hello, we have posted this on the slack channel as well but not received any response so going to try here.

We are trying to get sessions to display correctly in our OpenReplay instance but CSS is not rendering correctly. In the console we see this error:

Refused to apply style from '<URL>' because its MIME type ('application/xml') is not a supported stylesheet MIME type, and strict MIME checking is enabled

In order to troubleshoot this issue, we have then tried a number of things below to try and understand where the issue may lie.:

CSS not rendered Properly in Angular Applications Tested with Angular Versions : 18.1.2 and 7.2.15
OpenReplay Integrated using the script in index.html . Cannot use the npm package due to dependency issues of the project in angular 7.2.15 Scenario 01 : Adding bootstrap from CDN

  • Added the bootstrap CDNs to index.html
  • CSS working : Yes

Scenario 02 : Adding bootstrap from npm Case 01

  • Importing bootstrap to styles.scss
  • Bootstrap CSS working : No
  • Other Added CSS in project Working: Yes

Case 02

  • Importing bootstrap to angular.json
  • Bootstrap CSS working : No
  • Other Added CSS in project Working: Yes

Do you know about any fix for this or what could be causing this issue?

PS 1
OpenReplay version : 14.0.1

PS 2
Tested the Scenario 02 with OpenReplay npm package on angular 18.1.2 , same results as mentioned on Scenario 02 for both cases (edited)

Thank you

2

Hey Tom,

Can you please run openreplay -e then change the below

assets:
  env:
    ASSETS_SIZE_LIMIT: "60291456"

The CSS file exceeds the default limit (6Mb) and therefore cannot be downloaded hence the error you see in the logs.

Add the above block in the config file that opens after running openreplay -e. Also ensure there is no internal networking mismatch. Then simply record a new session, close the tab to force it to be processed, wait a couple minutes for it to appear in the dashboard/list then replay it to see if the issue is resolved .