I used John Papa's HotTowel Angular template to generate my app. On my development machine, my angular project works fine in IIS Express without <base> in the Index.html. When the project is published to IIS 8 hosting server to "MyIISsite/myAppName" folder the application runs except all the navigation starts at the "MyIISsite" instead of "MyIISsite/myAppName/...". I can't navigate to anywhere. This IIS 8 has multiple sites. MyIISsite is using port 8083. The folder is converted to a web application. When I added <base> tag in the Index.html, then I got the error about ng-include file is not found. Does anyone know how to configure IIS 8 for this problem? Thanks.
Here are the IE Developer Tools console message, index.html, and ui-Router configuration
(function ()
{
'use strict';
var myApp = angular.module('myApp');
myApp.config(['$stateProvider', '$locationProvider', uiRouteConfigurator]);
function uiRouteConfigurator($stateProvider, $locationProvider)
{
//debugger;
//http://www.jokecamp.com/blog/resolving-angularjs-paths-in-asp-mvc-spa-iis
// UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
// ------------------------------------------------------------------------------------------------------------
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'dashboardCtrl'
})
//test route ----------------------------------
.state('test', {
url: 'test',
//template:"<h2>Test</H2>",
templateUrl: 'app/test/test.html',
controller: 'testCtrl'
})
.state('uiGrid', {
url: 'uiGrid',
templateUrl: 'app/test/uiGrid.html',
controller: 'uiGridCtrl'
})
// admin routes -------------------------------
.state('changeSite', {
url: '/site',
templateUrl: 'app/admin/admin.html',
controller: 'adminCtrl'
})
// general routes -------------------------------
.state('about', {
url: '/about',
templateUrl: 'app/about/about.html',
controller: 'aboutCtrl'
})
.state('contactList', {
url: '/contacts',
//template:'<h2>Contacts</h2>',
templateUrl: 'app/contacts/contactList.html',
controller: 'contactCtrl'
})
// Otherwise routes -----------------------------
.state('otherwise', {
url: '*path',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'dashboardCtrl'
});
$locationProvider.html5Mode(true);
}
})();Error: [$compile:ctreq] Controller 'ngInclude', required by directive 'ngInclude', can't be found!
http://errors.angularjs.org/1.2.22/$compile/ctreq?p0=ngInclude&p1=ngInclude
at getControllers (http://myIISserver:8083/myApp/scripts/angular.js:6524:13)
at nodeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6692:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6086:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at publicLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:5982:30)
at Anonymous function (http://myIISserver:8083/myApp/scripts/angular.js:1440:11)
at Scope.prototype.$eval (http://myIISserver:8083/myApp/scripts/angular.js:12658:9)
at Scope.prototype.$apply (http://myIISserver:8083/myApp/scripts/angular.js:12756:11) <div data-ng-include="'/app/layout/shell.<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<style>
/* This helps the ng-show/ng-hide animations start at the right place. */
/* Since Angular has this but needs to load, this gives us the class early. */
.ng-hide {
display: none !important;
}
</style>
<title data-ng-bind="title">My App Title</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script>
// Must be first. IE10 mobile viewport fix
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
var mq = "@-ms-viewport{width:auto!important}";
msViewportStyle.appendChild(document.createTextNode(mq));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>
<link href="content/ie10mobile.css" rel="stylesheet" />
<link href="content/bootswatch/cerulean/bootstrap.min.css" rel="stylesheet" />
<link href="content/font-awesome.min.css" rel="stylesheet" />
<link href="content/ui-grid-unstable.css" rel="stylesheet" />
<link href="content/toastr.css" rel="stylesheet" />
<link href="content/customtheme.css" rel="stylesheet">
<link href="content/styles.css" rel="stylesheet" />
<!--<base href="/MyAppName/" />-->
</head>
<body>
<div>
<!-- shell -->
<div data-ng-include="'app/layout/shell.html'"></div>
<!-- splash -->
<div id="splash-page" data-ng-show="false">
<div class="page-splash">
<div class="page-splash-message">
My App Name
</div>
<div class="progress progress-striped active page-progress-bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>
<span data-cc-scroll-to-top></span>
<!-- Vendor Scripts -->
<script src="scripts/jquery-2.1.1.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<script src="scripts/ui-grid-unstable.js"></script>
<script src="scripts/angular-resource.js"></script>
<script src="scripts/angular-sanitize.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/toastr.js"></script>
<script src="scripts/moment.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/spin.js"></script>
<!-- Bootstrapping -->
<script src="app/myApp.js"></script>
<script src="app/config.js"></script>
<script src="app/config.exceptionHandler.js"></script>
<script src="app/config.ui.route.js"></script>
<!-- common Modules -->
<script src="app/common/common.js"></script>
<script src="app/common/logger.js"></script>
<script src="app/common/spinner.js"></script>
<!-- common.bootstrap Modules -->
<script src="app/common/bootstrap/bootstrap.dialog.js"></script>
<!-- app modules -->
<script src="app/about/aboutController.js"></script>
<script src="app/admin/adminController.js"></script>
<script src="app/contacts/contactController.js"></script>
<script src="app/dashboard/dashboardController.js"></script>
<script src="app/layout/shellController.js"></script>
<!-- app.customers modules-->
<script src="app/customer/customerController.js"></script>
<!-- app.tasks modules -->
<script src="app/tasks/taskController.js"></script>
<script src="app/tasks/taskAddController.js"></script>
<script src="app/tasks/taskController.js"></script>
<script src="app/tasks/taskEditController.js"></script>
<script src="app/tasks/taskSearchController.js"></script>
<!-- app.users modules-->
<script src="app/users/userController.js"></script>
<!-- app Services -->
<script src="app/services/datacontext.js"></script>
<script src="app/services/directives.js"></script>
<script src="app/services/services.js"></script>
<script src="app/services/factories.js"></script>
<!-- test -->
<script src="app/test/testController.js"></script>
<script src="app/test/uiGridController.js"></script>
</body>
</html>