Host Angular 7 in Azure web app URL rewrite problem

问题

I have created a webapp in Azure to host my Angular 7 site. However I have a problem with the background image not being shown on the site.

It works fine locally.

In the console I get the following error: Failed to load resource: the server responded with a status of 500 (URL Rewrite Module Error.)

This is my web.config file:

<configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
</configuration>

The background image is located in /assets/images/ If I try to go directly to the image path I get this error:

I need help to find out why the background doesn't show and what I have done wrong

回答1:

I found the problem. When the angular app was build with

ng build --prod

Two web.config files where deployed. One in the root folder and one in the assets folder.

I found that this was done because the angular.json file had this configuration in it.

The solution was to remove the marked line form the configuration:

    "assets": [
      "src/assets",
      "src/favicon.ico",
      "src/web.config" <---- Removed this line
    ],

Hope this can help someone.

来源：https://stackoverflow.com/questions/53940859/host-angular-7-in-azure-web-app-url-rewrite-problem