Adam Modlin
Adam Modlin

Reputation: 3024

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

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?

Upvotes: 12

Views: 5289

Answers (2)

Vijay Vepakomma
Vijay Vepakomma

Reputation: 1023

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"
        });

Upvotes: 1

1st4ck
1st4ck

Reputation: 1277

try to add this in you head tag.

<html>
<head>
    <base href="/VirtualDirectory/">
</head>
<body>
    ...
</body>

Upvotes: 15

Related Questions