Host the Angular Application to IIS

Hosting an Angular application on IIS involves a few straightforward steps. 
 

Follow this step-by-step guide to seamlessly deploy your Angular project on IIS.

Step 1: Open Your Angular Project in Visual Studio Code
Review the build command in the package.json file. By default, it's usually set to ng build.



Step 2: Run the Build Command
Execute the ng build command in the terminal to compile your Angular application. 
This command creates a 'dist' folder, typically located at the specified output path in the angular.json file.





Step 3: Install IIS
Ensure that IIS is installed on your machine. You can install it through the "Turn Windows features on or off" option in the Control Panel.



Step 4: Create a New Site in IIS
Open the IIS Manager.
In the Connections pane, right-click on the "Sites" node and select "Add Website."
Fill in the required information, such as the Site name, Physical path to the folder , and choose a port.



Step 5: Configure URL Rewrite (Optional)
If your Angular application uses routing, consider configuring URL Rewrite for proper routing. 
Create a 'web.config' file in your 'dist' folder with the appropriate configurations.

Here's a simple example of a web.config file for an Angular application with routing.This file helps configure how the server handles URL requests.
----------------------------------------------------------------------------------------------------------------
<?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="/" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

----------------------------------------------------------------------------------------------------------------


Step 6: Restart IIS
After making these changes, restart IIS to apply the configurations.

Step 7: Access Your Angular Application
Open a web browser and navigate to http://localhost:yourport (replace 'yourport' with the specified port from Step 4).




Now, your Angular application is hosted on IIS. Access it through the specified port. If any issues arise, check the IIS logs for more information. 

Customize these instructions based on your specific requirements and environment. Thanks!