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.

Tseng

what asp.net framework you used ? MVC ? .net core ? – Fullbodied

not using an asp.net framework. Angular2 only. Which includes HTML, CSS, and Javascript. – Tseng

Did you solve it ? – Hooke

Would you mind accepting my answer on this one? -Judson – Romain

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.

Romain

Thank man, you just made my day. Been sitting with this one for a little while :-) – Murky

If you have an "api" backend you can also use this #12614572 – Lauralauraceous

Any idea how can i mix that rule with one that allow me to redirect from HTTP TO HTTPS.? – Durarte

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.

Lydalyddite

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.

Prole

Solid for cases where using rewrite module isn't possible. Changing 404 to execute url '/' will leave the applications routing intact. – Stereometry

Oh man, I really wanted for this to work, but alas, it did not. Still getting a 404 at my localhost:1234/account when I refresh the page...would it work differently if there was no "Application" after "Site", per your "HowTo"? My app is running at the root of the site... – Dudleyduds

@Serj are you editing the IIS from which are you executing your app? Having a port specified I assume you are running an IIS Express instance – Knitter

Nope, running it as a site in my local IIS, not Express, binding to a specific port – Dudleyduds

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>

Accusatory

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

Magalymagan

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/

Paulita