ASP NET Angular deployment on Azure gives 404 resource not found for any file or route

Question

I've been trying to deploy my ASP.NET Boilerplate project to Azure and so far I've succeeded to publish my project to Azure using Visual Studio publish. Right now I have my back-end up and running and I can access the swaggerUI page and execute API calls on my back-end.

Whenever I try to deploy the Angular front-end to the server I only seem to get 404 - Resource not found errors for each file and route I try to access. I have been loosely following this guide, the only difference is that I have a merged project, meaning the back-end and front-end are both located on the same Azure appservice.

I deploy Angular by first running ng build --prod locally and then moving all the files in my local wwwroot/dist folder to the wwwroot folder of my Azure web app using FTP. I make sure the appsettings.production.json and assets/appconfig.production.json files contain the right URLs and I have added the <mimeMap fileExtension=".json" mimeType="application/json" /> rule to my web.config file.

Whenever I try to go to either the base url of my site, go to an asset ie /assets/images/login_background.png, or to a specific route, I get a console error that then immediately dissapears. Perhaps this has something to do with the routing?

My assets/appconfig.production.json file:

{
  "remoteServiceBaseUrl": "https://orchestra-agenda.azurewebsites.net/",
  "appBaseUrl": "https://orchestra-agenda.azurewebsites.net/",
  "localeMappings": [
    {
      "from": "pt-BR",
      "to": "pt"
    },
    {
      "from": "zh-CN",
      "to": "zh"
    },
    {
      "from": "he-IL",
      "to": "he"
    }
  ]
}

My appsettings.production.json file in the wwwroot folder:

{
  "ConnectionStrings": {
    "Default": "Server=orchestra-agenda.database.windows.net; Database=MyDatabaseName;User ID=MyUserName;Password=MyPassword"
  },
  "App": {
    "ServerRootAddress": "https://orchestra-agenda.azurewebsites.net/",
    "ClientRootAddress": "https://orchestra-agenda.azurewebsites.net/",
    "CorsOrigins": "https://orchestra-agenda.azurewebsites.net/,http://orchestra-agenda.azurewebsites.net/"
  },
  "Authentication": {
    "JwtBearer": {
      "IsEnabled": "true",
      "SecurityKey": "OrchestraAgenda_C421AAEE0D114E9C",
      "Issuer": "OrchestraAgenda",
      "Audience": "OrchestraAgenda"
    }
  }
}

My Web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
    </handlers>
    <aspNetCore processPath="dotnet" arguments=".\OrchestraAgenda.Web.Host.dll" stdoutLogEnabled="false" stdoutLogFile="\\?\%home%\LogFiles\stdout" forwardWindowsAuthToken="false" startupTimeLimit="3600" requestTimeout="23:00:00" hostingModel="InProcess">
      <environmentVariables>
        <environmentVariable name="COMPLUS_ForceENC" value="1" />
        <environmentVariable name="ASPNETCORE_ENVIRONMENT" value="Development" />
      </environmentVariables>
    </aspNetCore>
    <httpProtocol>
      <customHeaders>
        <remove name="X-Powered-By" />
      </customHeaders>
    </httpProtocol>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>
<!--ProjectGuid: 38e184bd-e874-4633-a947-aed4fdb73f40-->

Please let me know if you have any idea what could cause this problem

Answer 1

I figured out what the problem was. The server expects the web.config file in the /src folder, not in the root folder. You also need to add the src/web.config to the assets in the angular.json and add a few rules to the web.config. I solved it after I found this post where they elaborate on it in more detail: angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable