My AngularJS application is based on an ASP.NET project and uses html5mode, which works perfectly fine unless I try to pass route parameter(s).
Here is the Angular routing code:
$locationProvider.html5Mode(true);
$routeProvider.when('/accounts', {
templateUrl: 'templates/accounts.html',
controller: 'accountsCtrl',
title: 'Accounts',
resolve: {
accounts: function (accountData) {
return accountData.getAll();
}
}
});
$routeProvider.when('/account/:accId', {
templateUrl: 'templates/editAccount.html',
controller: 'editAccountCtrl',
title: 'Account',
resolve: {
account: function ($route, accountData) {
return accountData.get($route.current.pathParams.accId);
}
}
});
Regarding the web.config file:
<system.webServer>
<rewrite>
<rules>
<rule name="Imported Rule 1" stopProcessing="true">
<match url="^index\.html" ignoreCase="false" />
<action type="None" />
</rule>
<rule name="Imported Rule 2" stopProcessing="true">
<match url="." ignoreCase="false" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
When I use the route localhost:3849/accounts, it works. However, when I try localhost:3849/account/1, it breaks the system and fails to load *.js libraries or any other resources.
The console shows an error for every library: Uncaught SyntaxError: Unexpected token <. What could be wrong?
UPDATE: The issue was with how scripts were referenced in the index.html file. Originally, it was:
<script type="text/javascript" src="Scripts/angular.min.js"></script>
It should have been:
<script type="text/javascript" src="/Scripts/angular.min.js"></script>
So, when making a request to localhost:3849/account/1, the server was looking for files at localhost:3849/account instead of finding them and returning index.html. The same issue occurred with routing where:
templateUrl: 'templates/editAccount.html',
Should have been:
templateUrl: '/templates/editAccount.html',