Deploy ASP.NET Boilerplate Core & Angular to Microsoft Azure

I would want to deploy ASP.NET Boilerplate Core & Angular to Microsoft Azure. The current version of ASP.NET Boilerplate contains two solutions (one for the backend and one for the frontend) so i need to deploy it to two different AppServices and a SQL database. Here is what i tried:

Publish the back-end application:

• create an Web App + SQL App Service.

• configure the Web.Host/appsettings.production.json as following:

  "App": {
      "ServerRootAddress": "https://myapp-backend.azurewebsites.net/",
      "ClientRootAddress": "https://myapp.azurewebsites.net/",
      "CorsOrigins": "https://myapp.azurewebsites.net/"
  }
  

• publish the application to Azure using Visual Studio

• i am able to see the swager for the API when browsing to https://myapp-backend.azurewebsites.net/

Publish Angular

• create a new simple Web App for the Angular Client.
• run ng build -prod

• copy the web.config. It looks like this:

  <?xml version="1.0" encoding="utf-8"?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <clear />
          <!-- ignore static files -->
          <rule name="AngularJS Conditions" stopProcessing="true">
            <match url="(app/.*|css/.*|fonts/.*|images/.*|js/.*|node_modules/.*)" />
            <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
            <action type="None" />
          </rule>    
          <!-- check if its root url and navigate to default page -->
          <rule name="Index Request" enabled="true" stopProcessing="true">
            <match url="^$" />
            <action type="Redirect" url="/home" logRewrittenUrl="true" />
          </rule>    
          <!--remaining all other url's point to index.html file -->
          <rule name="AngularJS Wildcard" enabled="true">
            <match url="(.*)" />
            <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
            <action type="Rewrite" url="/app" />
          </rule>    
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>`
  

This is the json configuration:

• Configure the angular/dist/assets/appconfig.json like following:

  {  
    "remoteServiceBaseUrl": "https://myapp-backend.azurewebsites.net",  
    "appBaseUrl": "https://myapp.azurewebsites.net"  
  }
  

• Send the publish files from dist to wwww folder to Azure via FTP

• When browsing to https://myapp.azurewebsites.net/ i see an error in the console application indicating: "Unexpected token < " like in the image below:

If i type enter link description here i am getting this error message:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

I assume it is probably related to the Web.config and the way the routing are set in the Angular application but i at this moment i am lost. Could you help?