Angular - Failed to load resource: the server responded with a status of 404 in IIS

Question

I have Angular-13 application. On the IIS, it is called:

employee-app

Then the url is: https://localhost:8443/employee-app/

Then I did:

ng build --base-href "/employee-app"

I also added Web.config to the folder as:

<configuration>    
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" 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="/employee-app" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

When I deployed to the IIS server, the page was blank, and I got this error on the console:

main.f107fa3fc7ba3641.js:1 
 Failed to load resource: the server responded with a status of 404 ()
polyfills.0dd9b861b018ea86.js:1 
 Failed to load resource: the server responded with a status of 404 ()
runtime.30192984d3b85856.js:1 
 Failed to load resource: the server responded with a status of 404 ()
styles.4c3f76269b6e93fd.css:1 
 Failed to load resource: the server responded with a status of 404 ()
scripts.600cbbbafade3176.js:1 
 Failed to load resource: the server responded with a status of 404 ()
styles.4c3f76269b6e93fd.css:1 
 Failed to load resource: the server responded with a status of 404 ()

I deployed on the default website of the IIS.

How do I get this resolved?

Thanks

You can try to use failed request trace to get detailed error information, and there is also the same error here you can also use as a reference: [https://stackoverflow.com/a/45073371/13336642](https://stackoverflow.com/a/45073371/13336642). — samwu, Mar 08 '22 at 02:12

score 0 · Answer 1 · answered Mar 07 '22 at 15:49

0

In the production environment, baseHref will be "/" only.

answered Mar 07 '22 at 15:49

Obaid

2,563
17
15

score 0 · Answer 2 · answered Nov 30 '22 at 15:19

Just one other tip, if anyone's stuck on this.

Go into the "Request Filtering" section of your IIS web site, and make sure ".css" has "Allowed" set to true.

Our on-premise Angular website worked fine, but for some reason, when it was migrated to Azure, it mysteriously got set back to false... just for css files (?!)

Angular - Failed to load resource: the server responded with a status of 404 in IIS

2 Answers2