How to Deploy Angular 15 App in Production IIS Web Server / Fix URL 404 Issues Found After Deployment

Are you struggling to deploy your Angular 15 app in a production IIS web server? Do you keep encountering URL 404 issues after deployment? Not to worry, as we’ve got you covered. In this guide, we will walk you through the steps to successfully deploy your Angular 15 app on an IIS web server and how to fix any URL 404 issues that may arise.

Step 1: Build Your Angular 15 App

The first step in deploying your Angular 15 app is to build it using the Angular CLI. Navigate to your Angular project directory in the command line and run the following command:

      
        ng build --prod
      
    

This will create a dist folder in your project directory, which contains the production-ready build of your Angular 15 app.

Step 2: Set Up IIS Web Server

Next, you’ll need to set up an IIS web server to host your Angular 15 app. If you don’t have IIS installed on your machine, you can do so by following the installation instructions provided by Microsoft.

Step 3: Deploy Your Angular 15 App to IIS

Once IIS is set up, you can deploy your Angular 15 app by copying the contents of the dist folder created in Step 1 to the wwwroot folder of your IIS web server.

Step 4: Fix URL 404 Issues

After deploying your app, you may encounter URL 404 issues when navigating to different routes within your app. This is because IIS by default does not handle URL routes properly for single-page applications like Angular. To fix this, you’ll need to configure the web.config file in the root directory of your app to redirect all requests to the index.html file.

      
        <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="/" />
                </rule>
              </rules>
            </rewrite>
          </system.webServer>
        </configuration>
      
    

Add the above code to your web.config file and save the changes. This will ensure that all requests are redirected to the index.html file, allowing your Angular app to handle the routing properly.

Step 5: Test Your Deployed App

Finally, test your deployed Angular 15 app in the production IIS web server to ensure that the URL 404 issues have been fixed and that your app is functioning as expected.

By following these steps, you should be able to successfully deploy your Angular 15 app on a production IIS web server and fix any URL 404 issues that may arise. Good luck!