Deployed angular app to Azure web app but default page shows

Programming
, , ,
1

Issue: Unable to deploy Angular application to Azure Web App

I created an Azure Web App with runtime configuration as follows:

[![enter image description here](https://i.stack.imgur.com/3GxxQ.jpg)](https://i.stack.imgur.com/3GxxQ.jpg)

My local setup:

  • Node version: v13.0.1
  • Angular version: 8.2.11

I used the Angular CLI to create the application and ran ng build --prod to create the dist. I then attempted to deploy the application to the Web App using two methods:

  • Azure App Service Extension in VS Code
  • FTP using FileZilla with the FTP details from the Web App’s deployment center

However, when I browse to the Web App URL (https://eventzweb.azurewebsites.net/), I see the following page instead of my page from the Angular app:

[![enter image description here](https://i.stack.imgur.com/A8Ddc.jpg)](https://i.stack.imgur.com/A8Ddc.jpg)

Why is this happening? Why am I not seeing my page?

2

The issue is most likely caused by the incorrect deployment of the Angular application to the Azure Web App.

To resolve this issue, follow these steps:

  1. Make sure you have the latest version of the Azure App Service Extension installed in Visual Studio Code.

  2. Double-check that you have built the Angular application using the correct command: ng build --prod.

  3. Verify that the dist folder contains the compiled files of your Angular application.

  4. Use the Azure App Service Extension in Visual Studio Code to deploy the application. Make sure you select the correct subscription, resource group, and App Service Plan.

  5. Alternatively, you can use FTP to upload the contents of the dist folder to the Azure Web App. Ensure that you have the correct FTP details from the Web App’s deployment center.

After deploying the application using either method, try accessing the Web App URL again. You should now see your Angular application instead of the default page.