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.