Get Angular2 routing working on IIS 7.5

Question

I have been learning Angular2. The routing works just fine when running on the nodejs lite-server. I can go to the main (localhost:3000) page and move through the applicatio

Answer 1

If you are having url other than root of the application you can try this:

 <rule name="AngularJS Routes" stopProcessing="true">
      <match url="(.*)mypath/myangularapp/dashboard(.*)" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/mypath/myangularapp/dashboard/index.html" />
    </rule>

Make sure you have built your Angular app via the following command:

ng build --base-href=/mypath/myangularapp/dashboard/

Answer 2

Using URL rewrite module will kill routing path inside application. I've changed Error page for 404 Not Found response to my index.html file. This will not change the URL in browser, but server returns the whole application.

HowTo: Site->Application->Error Pages from context menu on Status Code 404 choose Edit... and choose option Execute URL on this site. Enter /index.html and press OK. Note the path is from site root so you may need to include your app path.

Answer 3

(For angular 2, angular 4)

Create a web.config file as in mentioned article.

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

Place it in the root directory (same as index.html) of your site. Mine is in the dist folder (angular-cli project).

After deploying, go to IIS if you have the access and you can click on the rewrite-rules icon and see that it read this config. If you do not see and icon for rewrite rules, you will need to enable the module under "modules" icon. This code snippet was not written by be but I wanted to share better implementation details.

Answer 4

My angular 6 app is running in a subfolder and I had problems with the appoach to redirect into the subfolder. Instead I redirect directly to the index.html

Step 1.) Build angular app with the --base-href flag like this: ng build --prod --base-href /ng/

Step 2.) Create a web.config in this folder with the redirct to the index.html like this:

<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>
  </system.webServer>
</configuration>

Answer 5

If you use a Core 2.1 project, you can skip the web.config rewrite rules and accomplish Angular deep linking by putting this code at the bottom of your Startup.cs.

   app.Use(async (context, next) =>
   {
       context.Response.ContentType = "text/html";
       await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
   });

Source

Answer 6

You should be using URL rewrite module to achieve this. A very detailed info on how to use it is provided here

And a sample web.config snippet which worked for me on IIS 8 is here.