AngularJS routing not working after site hosted into IIS, extra hashtag has been added

Question

I've just started to learn angularjs by building some small project SPA+.NET MVC project. When i run my app on IIS every thing works fine, but when i host my app on IIS i have an issue with routing

IISexpres URL: localhost/#/contact

Expected url (IIS10): localhost/myappname/#!/contact.

Actual URL(IIS10): localhost/myappname/#!/#contact.

As you see there is an extra"#", when i remove it i got the right template (contact)

app.js

(function () {
    'use strict';

    angular.module('app', []);
    var scotchApp = angular.module('scotchApp', ['ngRoute']);

    scotchApp.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'pages/home.html',
                controller: 'mainController'
            })

            .when('/about', {
                templateUrl: 'pages/about.html',
                controller: 'aboutController'
            })

            .when('/contact', {
                templateUrl: 'pages/contact.html',
                controller: 'contactController'
            });
    });
})();

main.js

(function () {
    angular
        .module('scotchApp')
            .controller('mainController', function ($scope) {
                $scope.message = 'Everyone come and see how good I look!';
            });

    angular
        .module('scotchApp')
        .controller('aboutController', function ($scope) {
            $scope.message = 'Look! I am an about page.';
        });

    angular
        .module('scotchApp')
        .controller('contactController', function ($scope) {
            $scope.message = 'Contact us! JK. This is just a demo.';
        });
})();

HTML

<div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                </ul>
    <div ng-view></div>
     </div>

As i understand when the for IISexpress the project is a root and there is no problem, but for IIS10 it not, and it is impossible, for me, to make it as a root. I tried solutions from this forum: doesn't help. Googled: no changes yet.

Maybe somebody knows what is a problem? Any suggestions? Tnx guys

Answer 1

need to add <div ng-view> in the html.

<ul class="nav navbar-nav">
   <li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
   <li><a href="#/about"><i class="fa fa-shield"></i> About</a></li>
   <li><a href="#/contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
<div ng-view>
</div> 

in app js remove the scotchApp module variable since you only use the global variable inside that js file and remove additional app module.

(function () {
    'use strict';

    angular.module('scotchApp', ['ngRoute'])

    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'pages/home.html',
                controller: 'mainController'
            })

            .when('/about', {
                templateUrl: 'pages/about.html',
                controller: 'aboutController'
            })

            .when('/contact', {
                templateUrl: 'pages/contact.html',
                controller: 'contactController'
            });
    });
})();

Demo