Deploying an Angular Project to IIS: A Step-by-Step Guide

Deploying an Angular application to a Windows server using IIS (Internet Information Services) is a common scenario in enterprise environments. This tutorial walks you through every step of the process: from building your Angular app to handling routing via IIS URL Rewrite rules.

🧰 Prerequisites

Before you begin, ensure:

• You have an Angular application ready (Angular CLI installed).
• Your Angular app builds correctly with ng build.
• IIS is installed on your Windows server.
• Optional: Admin rights on the server.

🏗️ Step 1: Build the Angular App for Production

Start by generating a production-ready version of your Angular project.

🔧 Build Command

ng build --configuration production

⚠️ If you’re using Angular v12+, you can also use:

ng build --prod

This will generate a dist/ folder with your compiled project. The folder path will look like:

dist/your-project-name/

Inside this folder, you’ll find:

• index.html
• main.*.js, runtime.*.js, polyfills.*.js, etc.
• Your assets

🌐 Step 2: Install IIS on Windows (If Not Already Installed)

👉 How to Install IIS:

1. Go to Control Panel → Programs and Features
2. Click Turn Windows features on or off
3. Check Internet Information Services
4. Press OK and wait for installation to complete

🌍 Step 3: Add a New Website in IIS

1. Open IIS Manager
2. In the Connections pane, right-click Sites > Add Website
3. Configure the website:
   • Site Name: MyAngularApp
   • Physical path: Browse to dist/your-project-name
   • Port: e.g., 80 or 8080
   • Hostname (optional): my-angular.local

Click OK to create the site.

🧱 Step 4: Configure MIME Types (Optional but Recommended)

Angular serves .js, .css, .json, .woff2, etc. Make sure IIS can serve them:

• In IIS Manager, go to your site → MIME Types
• Add missing types like:
  • .json → application/json
  • .woff2 → font/woff2

🔁 Step 5: Install and Configure URL Rewrite for Angular Routing

Angular uses HTML5 pushState routing, so deep links like /about or /dashboard must route back to index.html.

🧩 Install URL Rewrite Module

1. Go to Microsoft’s official URL Rewrite download page
2. Install it on your IIS server

🔁 Add Rewrite Rule

In IIS Manager:

1. Select your Angular site
2. Double-click URL Rewrite
3. Click Add Rules… > Choose Inbound Rules → Blank Rule
4. Set rule name: AngularRoutes
5. Match URL:
   • Requested URL: Matches the Pattern
   • Using: Regular Expressions
   • Pattern: ^(?!.*\.(js|css|png|jpg|jpeg|gif|ico|json|svg|woff2|woff|ttf|eot|map)$).*$
6. Conditions:
   • Add: {REQUEST_FILENAME}
   • Check if “Is File” → False
   • Add another: {REQUEST_FILENAME} → “Is Directory” → False
7. Action:
   • Action type: Rewrite
   • Rewrite URL: /index.html

This tells IIS to serve index.html for all non-file, non-folder routes — allowing Angular to handle routing.

🔐 Step 6: Set Folder Permissions

Make sure the IIS application pool user (typically IIS_IUSRS) can read the contents of the dist/ directory.

Steps:

1. Right-click your dist/your-project-name folder → Properties
2. Go to the Security tab
3. Click Edit, add IIS_IUSRS with Read & Execute permissions

✅ Step 7: Restart and Browse Your Angular App

1. In IIS Manager, right-click your new site → Manage Website → Restart
2. Open a browser and navigate to:

   http://localhost/
   

   or

   http://your-domain.com/
   

Your Angular application should now load correctly — and handle client-side routing without 404 errors.

🧪 Optional Step: Enable HTTPS

To serve your app over HTTPS:

1. Obtain an SSL certificate (e.g., via Let’s Encrypt, or a self-signed cert)
2. Bind the HTTPS port in IIS:
   • Go to your site → Bindings → Add → Select https and choose the certificate

🛠️ Common Issues and Fixes

🧠 Final Thoughts

Hosting an Angular app on IIS is simple and efficient once your production build and routing are correctly configured. IIS serves static files well and, with URL Rewrite, you get seamless Angular routing support.