404 Error on Angular Scripts Deployed to IIS

Question

I've deployed an Angular Application to IIS on Windows Server and it's failing to load due to the script / style bundles all giving 404 errors. I've set up my application in IIS as "portal" and done the URL rewrite in the web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
<rewrite>
  <rules>
    <rule name="AngularJS Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/portal" />
    </rule>
  </rules>
</rewrite>
  </system.webServer>
</configuration>

And set the base url on index.html to:

<base href="/portal">

When I built the app to dist folder, the command I used was just a straightforward build ng b with no options.

An example of the errors I'm getting in the console are:

GET http://wavemaker.webdevelopwolf.com/inline.bundle.js net::ERR_ABORTED 404 (Not Found)

Answer 1

For building app, use the command

ng b --deploy-url /portal/

Answer 2

For building use

  ng build --base-href "/portal/" --prod 

Make sure to use images from assets folder and refer like this in your HTML

 <img src="assets/img.jpg" alt=""> instead of <img src="../../assets/img.jpg" alt="">