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:

https://myapp.xyz/VirtualDirectory/

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

$routeProvider
.when('/', {
    templateUrl: 'Content/Partials/Home/Index.html'
})
.when('/Error', {
    templateUrl: 'Content/Partials/Shared/Error.html'
})
.otherwise({
    redirectTo: '/Error'
});

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

https://myapp.xyz/VirtualDirectory/#/

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:

https://myapp.xyz/VirtualDirectory/Content/Partials/Home/Index.html

However, if I access without a trailing slash like:

https://myapp.xyz/VirtualDirectory

Angular routes to:

https://myapp.xyz/VirtualDirectory#/

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

https://myapp.xyz/Content/Partials/Home/Index.html

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.

<html>
<head>
    <base href="/VirtualDirectory/" rel="nofollow noreferrer noopener">
</head>
<body>
    ...
</body>

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 stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply