How to Deploy an Angular App on IIS – Step-by-Step Guide

ng build --configuration production --base-href /myapp/

This ensures that <base href="…"> in the generated index.html matches the deployment path.

After this, you’ll see a dist/your-app-name/ directory containing HTML, JS, CSS, assets, etc.

2. Install and Prepare IIS (If Not Already Installed)

If IIS is not already running on your Windows server or machine:

• Go to Control Panel → Programs → Turn Windows features on or off

• Enable Internet Information Services

• Under IIS, ensure features like Static Content and Default Document are enabled

• You also need the URL Rewrite extension installed (downloadable separately) so you can add routing rewrite rules

Once IIS is ready, open IIS Manager (inetmgr).

3. Create a Site or Application in IIS

Decide whether you want your Angular app as a standalone site or under an existing site as a sub-application.

• In IIS Manager, right-click Sites → Add Website..., or under an existing site, right-click and Add Application

• Give it a Name / Alias (e.g. MyApp)

• Set the Physical Path to the folder where you'll place the built dist/your-app-name/ output

• Assign a port, binding, and host name as needed

• For the Application Pool, choose No Managed Code (because this is a static app)

• In Default Document, make sure index.html is present (or added)

Now, the site or application is pointing to your folder, but routing might not work yet.

4. Add web.config (URL Rewrite) for Angular Routing

Because Angular apps use client-side routing, when a user refreshes or directly navigates to a route (e.g. /users/details), IIS would normally try to serve a real file or return 404. You must instruct IIS to rewrite all non-file, non-directory requests to index.html, so Angular’s router can handle them.

Create a web.config file in your build output root (i.e. alongside index.html) with content like this:

<?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>
    <staticContent>
      <!-- Optionally add MIME types if needed, e.g. json → application/json -->
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

Key points:

• The rewrite rule matches all URLs (.*)

• It only rewrites if the file or directory doesn’t exist (i.e. isn’t a real resource)

• It rewrites to index.html (relative path)

• You may need to adjust paths if deploying to a subfolder or virtual directory

If you built with --base-href /myapp/, you might adjust the rewrite URL accordingly (e.g. url="/myapp/").

Also, ensure that this web.config file is included in your deployed output. To do that, you may list it under assets in angular.json so that it’s copied into dist/ during build.

5. Deploy the Files to the Server

With build done and config ready:

• Copy all files and subfolders from dist/your-app-name/ (including web.config) into the physical path folder you configured in IIS

• Make sure the IIS user or application pool identity (e.g. IIS_IUSRS or ApplicationPoolIdentity) has read access to the folder

• In IIS, Restart or Recycle the application pool if necessary

6. Test and Validate

Open your browser and navigate to your site:

• http://localhost or http://yourdomain.com/ (or with the alias/subfolder)

• The main page should load

• Try navigating inside your app (click links)

• Try refreshing a nested route (e.g. /myapp/some/route) — it must not 404

• Use browser dev tools to check for console or network errors

If you get 404 or missing JS/CSS, check whether the base href is correct and whether the rewrite rule is working properly.

7. Common Pitfalls and Tips

• Wrong base href: If you build with wrong base path, your app may try to load resources from wrong URLs

• Missing web.config or URL Rewrite not installed: Without rewrite support, deep routes will fail

• Permissions: Ensure IIS user has access to serve static files

• Application Pool choice: Use No Managed Code for static apps

• Caching / Bundling: If you change content, browsers may cache old files—use versioning or cache busting

• Virtual directories: If your app lives under a subfolder, ensure paths and rewrite rules account for the subfolder alias

• APIs / Backend: If your Angular app calls backend endpoints, you might need proxying or reverse proxy setup (e.g. using URL Rewrite + ARR)

• MIME types: Sometimes JavaScript, JSON or other file types may require explicit MIME mapping in IIS

Conclusion

Deploying an Angular SPA to IIS is a manageable process when you:

1. Build it properly (especially base-href)

2. Set up IIS and install URL Rewrite

3. Deploy static files into an IIS site or application

4. Add rewrite rules (via web.config) to route all non-file URLs to index.html

With those steps in place, your Angular app will handle its own routing seamlessly, and you can host it on Windows/IIS infrastructure.