How to Solve Angular App Routing Issue on Windows Server with IIS

Introduction:

When deploying an Angular app on a Windows server running IIS (Internet Information Services), you may encounter an issue where accessing a direct URL results in a 404 error. However, navigating to the route through the app works fine. This can be frustrating, but fortunately, there’s a solution to resolve this problem. In this article, we’ll explore the issue and provide step-by-step instructions to fix it.

Understanding the Issue:

The problem arises because IIS does not recognize the Angular routes when accessed directly via a URL. To address this, we need to configure IIS to redirect all requests to the Angular app’s entry point, the index.html file.

Solution Steps:

Create or Modify the web.config File:

• In the root directory of your Angular app on the Windows server, create or modify the web.config file. This file handles server configuration and rewrite rules.
• Add the following XML content to the web.config file:
• The file can be used from this location LearnSmartCoding App

<?xml version="1.0" encoding="utf-8"?>
<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="./index.html" />
      </rule>
    </rules>
  </rewrite>
        <security>
            <requestFiltering>
                <fileExtensions>
                    <add fileExtension=".svg" allowed="true" />
                    <add fileExtension=".woff" allowed="true" />
                    <add fileExtension=".woff2" allowed="true" />
                </fileExtensions>
            </requestFiltering>
        </security>
  
<httpProtocol>
    <customHeaders>
        <!-- <add name="X-Content-Type-Options" value="no-sniff"/>
        <add name="X-Frame-Options" value="SAMEORIGIN"/>
        <add name="X-Xss-Protection" value="1; mode=block"/>
        <add name="Strict-Transport-Security" value="max-age=31536000; includeSubDomains"/> -->
    </customHeaders>
  </httpProtocol>
        <httpRedirect enabled="false" destination="" />
</system.webServer>

</configuration>

Modify the Angular Project Configuration:

• Open the angular.json file in the root directory of your Angular project.
• Locate the "architect" section and find the configuration for the production build.
• Add a "assets" property to include the web.config file in the build output. Here’s an example:

"architect": {
  "build": {
    "options": {
      "assets": [
        "src/favicon.ico",
        "src/assets",
        "src/web.config"   // Add this line
      ],
      // ...
    },
    // ...
  },
  // ...
}

Build and Deploy the Angular App:

• Open a terminal or command prompt and navigate to the root directory of your Angular project.
• Run the production build command: ng build --prod.
• After the build process completes, you will find a dist folder in your project directory.
• Copy the contents of the dist folder to the appropriate location on your Windows server where the IIS website is hosted.

Test the Application:

• Visit your Angular app by directly accessing a route URL that was previously resulting in a 404 error.
• The app should now load correctly, without any routing issues.

Related Topics:

• How to Solve Angular App Routing Issue on Linux Server with Apache

Conclusion:

By including the web.config file in the Angular project’s build configuration, you can ensure it gets deployed along with the other build files to the Windows server running IIS. This resolves the routing issue encountered when accessing direct URLs of an Angular app. With this solution, your Angular app will work seamlessly, allowing users to access any route directly without encountering 404 errors.