Angular app on IIS 8.x virtual directory has strange URL behavior

All we need is an easy explanation of the problem, so here it is.

I’m having a problem with Angular JS on IIS 8.x with MVC. My application index page with virtual directory is like so:

That page loads the angular app. My angular routes are set up as:

.when('/', {
    templateUrl: 'Content/Partials/Home/Index.html'
.when('/Error', {
    templateUrl: 'Content/Partials/Shared/Error.html'
    redirectTo: '/Error'

So, if I access the first link, my URL looks like:

This works perfectly and resolves my partials fine. Angular requests the partials with the virtual directory in it so I see an HTTP request to:

However, if I access without a trailing slash like:

Angular routes to:

Once this happens, none of my routes work (they do not respect the virtual directory). They route as:

This breaks all of my routes and templates defined in my directives. Any suggestions on how to fix this issue?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

try to add this in you head tag.

    <base href="/VirtualDirectory/" rel="nofollow noreferrer noopener">

Method 2

I found that if you use the ./ syntax for the path, you don’t need to involve Razor.

Code which fails:

$routeProvider.when("/productList", {
            templateUrl: "/app/products/productListView.html", controller: "ProductListController as vm"

Code that works: (note the . before /app)

$routeProvider.when("/productList", {
            templateUrl: "./app/products/productListView.html", controller: "ProductListController as vm"

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply