AngularJS routing not working after site hosted into IIS

Question

We are creating SPA technique using AngularJS in ASP.NET MVC framework,AngularJS routing between pages are working fine when it's run from VS2013,but after hosting the application in to IIS7.5 routing not working,

Routing Script:

   var appRoot = angular.module('main', ['ngRoute', 'ngGrid', 'ngResource']);     //Define the main module

    appRoot
        .config(['$routeProvider', function ($routeProvider) {
            //Setup routes to load partial templates from server. TemplateUrl is the location for the server view (Razor .cshtml view)
            $routeProvider
                .when('/home', { templateUrl: '/home/main', controller: 'HomeController' }) .otherwise({ redirectTo: '/home' });
        }])
        .controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
            $scope.$on('$routeChangeSuccess', function (e, current, previous) {
                $scope.activeViewPath = $location.path();
            });
        }]);

Index.html:

 <li class="mt" data-ng-class="{active : activeViewPath==='/home'}">
                    <a href='#/home'>
                        <i class="fa fa-dashboard"></i>
                        <span>Dashboard Home</span>
                    </a>
                </li>


  <div class="col-lg-9 main-chart" ng-view="">
                </div>

Project Structure:

Solution 1

do you get any JS error when you run it on IIS?

are you using bundles? If so check if the problem happens because of minification/bundle creation adding BundleTable.EnableOptimizations = true; in RegisterBundles method and trying again in VS.

Otherwise I suggest you to run on local IIS (right click on project, tab "Web",section "Servers") and see if it works correctly.

Depending of your routing you should <base href="@Url.Content("~/")" /> in template head and get rid of "#" from url using $locationProvider.html5Mode(true); on route configuration.

If none of the above are useful please add more details to your request.

Have a nice day,

Alberto

Solution 2

Are you deploying your solution as a website or as an application on a virtual path? In other words, when you deploy your app what is url? Is it something like "myapp.mydomain.com" or "domain.com/myapp"?

If the latter, then the problem is that the request for the template { templateUrl: '/home/main' } will go to domain.com/home/main and not to domain.com/myapp/home/main when you expect it.

According to : Stating directive templateUrl relative to root just remove '/' in the template url and it should work: { templateUrl: 'home/main' }

The other option is to deploy your website to its own subdomain.

Solution 3

you have to edit a web.config file to do the rewrite and on the index like this <base href="/myAppNameOnIIS/"> no app name and the refresh will work fine using the web.config file

<?xml version="1.0" encoding="UTF-8"?>
 <configuration>
<system.webServer>
    <rewrite>
      <rules>
        <rule name="Main Rule" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    <add input="{REQUEST_URI}" matchType="Pattern" pattern="views/(.*)" negate="true" />
                </conditions>
                <action type="Rewrite" url="/bidocs/" />
            </rule>    
        </rules>
    </rewrite> 
    <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".wof2" mimeType="application/font-woff" />          
    </staticContent>
    <handlers>
        <add name="fonts2" path="*.woff2" verb="*" modules="IsapiModule" scriptProcessor="C:\Windows\System32\inetsrv\asp.dll" resourceType="Unspecified" preCondition="bitness64" />
        <add name="fonts" path="*.woff" verb="*" modules="IsapiModule" scriptProcessor="C:\Windows\System32\inetsrv\asp.dll" resourceType="Unspecified" preCondition="bitness64" />          
        <add name="JSON" path="*.json" verb="*" modules="IsapiModule" scriptProcessor="C:\Windows\System32\inetsrv\asp.dll" resourceType="Unspecified" preCondition="bitness64" />
    </handlers>
</system.webServer>

I fix it using this <action type="Rewrite" url="/myAppNameOnIIS/" /> in order for the HTML5 mode to work. keep in mind that this settings might not work on your localhost server if you are running the application from the root folder

Comments

[Ravuthasamy]

Thanks Alberto,this solved my problem <base href="@Url.Content("~/")" />

[Alberto]

My pleasure @Ravuthasamy!

[Cesar Vega]

this fixed mine partially because if I reload the page or hit the back button then i get 404 - File or directory not found. do you know how to fix this issue ??

[Cesar Vega]

Hi Miliano in my case my IIS is domain.com/myapp/index.html I dont have an app folder all files are in the root of this application on IIS. I remove the '/' but I still have the same problem

[ghiscoding]

That helped but in my case I had also had to add the prefix of my domain in the api URI request as well. Like so <add input="{REQUEST_URI}" pattern="^/myAppNameOnIIS/(api)" negate="true" /> and of course in the main page <base href='/myAppNameOnIIS/' />