'Angular's component styling is not applied on production (Netlify)

So I have certain styling which is not showing on my production environment (Netlify). There seems no rule to what styling is applied and what isnt. It seems like my custom Angular material theme is ignored

Hoewver, what is really weird is if I run it the same commands locally (ng build --configuration production && scully --prod --scanRoutes), then it works.

I dont know how I could debug this which makes it the hardest thing to solve.

I tried removing Angular SSR, app-shell because I thought this influenced it.



Solution 1:[1]

When writing my question. I kept on trying random things and I found that my css file was not found on the server side.

The only thing I could think of was that asset optimization influenced this and it was indeed the issue.

So if you are using asset optimization on Netlify. Make sure that you do not enable bundle CSS because then the file will not be sent to the client.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ruben Szekér