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 application. I can also type localhost:3000/employee and it will go to the requested page.

The app will eventually live on an Windows IIS 7.5 server. The routing works fine if I start at the main page (localhost:2500), I am able to move through application with out any problems. Where I run into a problem is when trying to go directly to an page other then the main landing page (localhost:2500/employee). I get a HTTP Error 404.0.

Here is my app.component file that handles the routing.

import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { HTTP_PROVIDERS } from '@angular/http';

import { UserService } from './services/users/user.service';
import { LogonComponent } from './components/logon/logon.component';
import { EmployeeComponent } from './components/employee/employee.component';


@Component({
     selector : 'opi-app',
     templateUrl : 'app/app.component.html',
     directives: [ROUTER_DIRECTIVES],
     providers: [ROUTER_PROVIDERS, UserService, HTTP_PROVIDERS]
})

@RouteConfig([
     {
      path: '/',
      name: 'Logon',
      component: LogonComponent,
      useAsDefault: true 
     },
     {
      path: '/employee',
      name: 'Employee',
      component: EmployeeComponent
     }
])

export class AppComponent { }

I would like to say I understand the issue. IIS is looking for a direcotry of /employee but it does not exist. I just do not know how to make IIS aware of the routing.

Answer 1

(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 2

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.

Answer 3

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 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

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/