My Angular 10 App deployed in Azure is loosing its styles when refreshed

Question

I have started working on an Angular 10 application using DevExtreme UI Widgets. I deployed a demo version in our Azure Cloud but while I was playing with it, I noticed a strange behavior. It seems that I lose my styles when I refresh. For example, this is how the login page should be displayed:

If I refresh the URL without entering my login credentials, the page changes and gets displayed like this:

When I login, the bad or good styles are carried over. For example, the landing page should be displayed like this:

If I refresh the screen here, I also see the styles being altered. This is how the landing page gets displayed when the styling is lost:

When I lose the styling if I keep refreshing the page over and over again, eventually I regain the styles and my application starts being displayed as intended.

Any idea what causes the styles to be lost? Any suggestion would be greatly appreciated.

Thanks, Ed

Answer 1

Regarding the deployment of Angular projects, I have encountered various problems. I am willing to share it with you and hope it will help you.

Troubleshooting steps:

Solution 1.

You can deploy it via Azure Pipelines CI/CD without using the vscode to deploy webapp.

Maybe smth wrong with VS Code plugin, as it is in preview

Solution 2.

Use github for continuous deployment. It is recommended to create a webapp and choose the Linux operating system.

Solution 3.

It is recommended to use FTP to publish the build folder after the project npm build.

Answer 2

This issue was resolved. After further investigation, it turns out that the problem had nothing to do with Azure Cloud deployment. I use DevExtreme UI widgets in my application and the application is based on their Angular Template.

I tried the website using Chrome, Edge and Firefox. The issue described above only happened in Chrome. DevExpress tech support pointed me to this support ticket.

After following the recommendations in the workaround and a redeployment, my app looks fine even in Chrome.

Thanks for everyone trying to help. Ed