Angular 12 app Azure app service (windows) not rendering any CSS. Works fine locallay

Question

I am struggling with an issue in my Angular 13 app. When I deploy it to my windows based azure app service, it doesn't seem to render ANY sort of CSS. This particular app uses tailwinds as the CSS "engine".

The odd thing is that it was working in Azure. I did a couple of minor enhancements, did an ng build and copied the code to my dev app service in Azure, and now its not rending correctly at all...seems to be missing the CSS. I attached a couple screen shots of the home login/page (one working and one not working).

I inspected the page load, and there are no 404 errors. I have ran into some MIME type issues in the past, so I added those to my web.config with no luck.

I even rolled back the code to the previously working source code base and deployed it...and now it is having the same rending issue. This tells me that it might be a configuration item in my azure app service. It was working as of last night and I broke something and can't figure it out.

Any ideas as to where I could look? Thank you!

Eric

Answer 1

Thank you User Anand Sowmithiran - Stack Overflow and User Eric Elliston - Stack Overflow. Posting your suggestions as an answer to help other community members.

The template stopped building "fully" while using ng build. By calling ng build fuse, it started working. Sometimes it’s better to build from the ground up instead of templates because things can go sideways easily if you are not paying attention when adding in additional package.

References: Angular and Deploy Angular 8+ Application to Azure App Service(PaaS) using Local Git(CD) | by Drexsolo | Medium