angular (v19) static web app displays blank screen

Question

steps to reproduce:

1. created angular app from v19 template
2. created static web app in portal with GitHub actions
3. checkin code to start pipeline

output from build:

• Deployment Complete :)
• 425Visit your site at: https://orange-cliff-09911e010.6.azurestaticapps.net
• when visiting the site the screen is blank

expected result:

• visit the site and see a website displayed

Answer 1

Hi Geno Salvati,

It seems you are facing issue blank screen when you are accessing angular. (19) static web after deployment

These are some steps that you can consider, check your build output location specified during creation of the static web app need to match the actual output directory of your Angular build.

Also verify the deployment logs from GitHub action workflow to check there is no errors while build and deploying.

If there are JavaScript errors when your app from loading, you can also check errors while opening the browser Developer Tools (F12 → Console)

If you see errors like "Failed to load resource" or "404 Not Found", it could indicate missing files or incorrect paths, it will also help out check the issues.

If you are using routing in angular check the routing has given correctly and check static web app setup can handle the client routing and also check all configurations are given properly

https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-angular?pivots=github#view-the-website

https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-angular?pivots=github#create-a-static-web-app

If the answer is helpful, please click Accept Answer and kindly upvote it so that other people who faces similar issue may get benefitted from it.

Let me know if you have any further Queries.