How to fix “Failed to load resource 404” after deploying angular application to azure portal web app

Question

I am trying to deploy an angular application to Microsoft azure app service via the dist folder. I run the script "ng build --prod" to generate a dist folder, compressed it, and uploaded it to the deploy site for azure service. Then only a part of the website is loaded and there are a lot of 404 errors. Here is my temporary web link: https://tes42.azurewebsites.net

The angular application has a rooter called "books", and the index.html file in the dist folder has code. I am thinking if the problem is caused by this?

Answer 1

To fix these 404 errors, you'll need to add a web.config file to your root with the following content:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico|.svg|.eot|.woff|\​.woff2)).*$" />
          <conditions logicalGrouping="MatchAll"></conditions>
          <action type="Rewrite" url="/" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
    </staticContent>
  </system.webServer>
</configuration>