Tips for Running an Angular app in IIS

Laurie Atkinson, Premier Developer Senior Consultant, A few tweaks are necessary to take an Angular app and move it to IIS. Here is a list of changes required to get everything running smoothly.

Using the Angular-CLI to generate an Angular SPA is an excellent way to scaffold out a well-organized application. This tool also includes a production build step that should allow you to xcopy your application to the web server of your choice. We’ll start here and discuss the necessary modifications to successfully run your application in IIS.

Use the Angular-CLI to create a production package

First decide whether the application will be located at the root in IIS (e.g. http://server-name) or in a path below the root (e.g. http://server-name/my-app).

If deploying to the root, run the Angular CLI build command:


If deploying to a path beneath the root, run the Angular CLI build command with the base-href option set to the name of application directory.


The base-href option modifies the base element in the index.html, so it looks as follows. This is required for routing to work correctly.


Create an IIS web application

Add the web site, or application, or virtual directory to IIS and set the physical path to the location of the dist folder created by the Angular CLI.


Any one of these three options shown below will work.


Install the URL Rewrite Module into IIS

This next step is required to support deep-linking, which is the capability for the user to navigate directly to a page by typing the route into the address bar instead of using the Angular routing. Deep-linking causes a problem for IIS because the URL that the user attempts to access is not known to the server and therefore the user receives a 404 response. The solution is for the server to always return the root of the application, even if the user requests a path within the application.

Get the URL Rewrite Module installer here:

After installing you should see a new icon in the IIS Manager.


Add web.config file with a URL Rewrite rule

All requests to this web application that are not for files or folders should be directed to the root of the application. For an application or virtual directory under the default web site, the URL should be set to the alias, (e.g. “/MyApp/”). For a web site at the root of the server, the URL should be set to “/”.

      <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" />
	  <action type="Rewrite" url="/MyApp/" />
	  <!--<action type="Rewrite" url="/" />-->

Bundle web.config file with your app

If using the Angular CLI, you can include the web.config with your other static assets in the Angular CLI config file and it will be bundled with your app when you run the ng build command. The following code assumes the web.config is in the src folder of your project.

.angular-cli.json (for Angular version 2 through 5)

"apps": [ { "root": “src”, "ourDir": “dist”, "assets": [ “assets”, “favicon.ico”, “web.config” ],

angular.json (for Angular version 6+)

“build”: { "options”: { . . . "assets": [ “src/assets”, “src/favicon.ico”, “src/web.config” ],


Problem: Navigating directly to a route results in a 404.

Solution: Make sure the web.config is correct and the URL property in the web.config matches both the base href in the index.html and the web application or virtual directory alias if necessary.

Problem: Navigating directly to a route results in a 500 or an error message related to the web.config.

Solution: Install the URL Rewrite module.

Problem: Navigating directly to a route displays a broken page and network/console errors show 404 results for js and css requests.

Solution: Verify that the base href in the index.html exactly matches the URL in the rewrite rule and that the slashes surrounding the name are not missing.

Comments (23)

  1. Praveen says:

    I create a Angular application using Microsoft.AspnetCore.SpaTemplates template with below commands:

    dotnet new –install Microsoft.AspnetCore.SpaTemplates::

    dotnet new angular

    Everything works fine when I debug from Visual Studio 2017.

    The same application when published to IIS virtual directory does not work (it does not take the virtual directory name). I installed .NET Core Windows Server Hosting Bundle and the application pool is set to use .NET CLR version as “No Managed Code”.

    when I run “ng build”, it says “compiler-cli” is not installed properly. Any idea how to get this working?

    1. Praveen,
      I have not used Microsoft.AspnetCore.SpaTemplates, but I don’t see that it uses the Angular CLI. So, none of the ng commands would apply in this case. You would need to manually change the index.html file to

      This page contains a section “Publishing for deployment” that you could take a look at for other issues:

      1. The blog removed my attempt to include html. You need to manually change the index.html file to
        base href=”/your-virtual-directory/”

  2. GuestAug says:

    Great article!

  3. guivms says:

    best article.

    work’s it

  4. Willem Dehaes says:

    Great article! I tried your approach and it works, but I have one issue: the routing inside my app is lost. For instance, if I go put in”” in my browser it will reroute me to “”. When I navigate through the app it works fine.

    1. Is it possible that an error is occurring in a resolver or a canActivate guard is failing when you navigate directly to the details page? If so, the error would prevent the routing to occur.

  5. David says:

    I deployed my Angular project to our dev environment using IIS Version 6.1 SP1 and I’m getting 403 Forbidden error on my route parameter. In my URL is http://webdev01/LpPortal2/login/client and the “client” is not a component but a route parameter. The project works perfectly fine on my localhost, the issue is only when I pushed the code to our development environment server. Could it be an issue with my IIS version? Does it need to be 7? Any ideas why this doesn’t work?

    1. David says:

      After doing more research I realized that I didn’t set my -base-href when building the app. It’s all good.

  6. Jeff says:

    I am in the process of deploying a new Angular 2/4 app and ran into the problem on the server where the user cannot refresh. I am trying to implement the URL re-write like you describe above but I need to exclude API request ( url https://myapp/api), is it as simple as entering a pattern similar to this ?

    1. Something like this should work:

      conditions logicalGrouping=”MatchAll”
      . . .
      add input=”{REQUEST_URI}” pattern=”^/(api)” negate=”true”

      Here’s a resource on constructing the pattern:

  7. Joel says:

    Thank you for posting this. It is extremely helpful.

  8. Malitha shan says:

    Thanks , Great article!

  9. mr.AMM says:

    Hi Everyone.
    I encountered a special problem while trying to deploy my angular app in IIS and it took some time for me to identify the root cause. IIS server didn’t recognize the ‘/”(forward) in URL.
    After a long trial and error I changed URL to ‘\’ (backward) and my application started to run.
    This change is applicable to in index.html as well.
    I hope it may be helpful to someone like me.

    1. mr.AMM says:

      Change is applicable in base href=”\myApp\” of index.html.

  10. ankur says:

    I found a nice and detailed explanation of deploying angular 2 app in IIS at this link –

  11. joey says:

    Hi Sir,
    Thank you for a great article, I will just ask if I can use this deployment steps for a project is using two framework at the same time, which is angular 5 and core.

  12. SIMON WEAVER says:

    You can just do this and then it works whether you are in the root or a subdirectory (virtual directory).

    Unless there’s some catch I’m not seeing.

  13. Jihed Halimi says:

    Great article Pam: helpful and concise!

  14. Pam says:

    For others who might still be getting 500 responses when navigating directly to a route, even when the URL Rewrite module is already installed…

    If you’re using another application pool other than the default (i.e., MyAngularAppPool), and your app is a sub application or sub folder, the rewrite module appears to need your app pool to have permissions on both your app’s folder, and the parent site folder.
    For example, if your setup is ParentSite/MyAngularAppSubSite, read permissions must be set for MyAngularAppPool at both MainSite and MyAngularApp folders.

    1. Soleyne says:


      I have an 500 error “HTTP Error 500.19 – Internal Server Error
      The requested page cannot be accessed because the related configuration data for the page is invalid.” but i don’t understand what do you say.

  15. PCarvalho says:

    Bom dia,

    Parabéns pelo seu post, fiz todas configurações relatadas no seu post e funcionou perfeitamente. Alguns erros de caminho de imagens mais isso não impediu da aplicação funcionar.

    Mais uma vez parabéns.

  16. fj says:


    Great article. May I suggest a small improvement would be to outline adding a MIME type for .json files in the web.config?

    This can be particularly useful when loading Angular application configuration on start up of the application (see also


Skip to main content