Issue
I have angular app with routing: <base href="/application/">
$stateProvider
.state('main', {
url: '/',
templateUrl: 'js/templates/main.html'
})
.state('main.admin', {
url: '^/admin',
templateUrl: 'js/templates/admin-page.html',
controller: 'AdminController'
})...
$locationProvider.html5Mode(true);
When I use links like
<li role="presentation" ui-sref-active="active">
<a href class="custom-tab-label" ui-sref="main.admin"Admin</a>
</li>
all works fine. link is http://localhost:8080/application/admin
But when I try to refresh this page – there is 404 error.
Where is the problem?
Solution
you need to instruct your server-side to use angular routing… here is a link on how to do it…
e.g. in IIS
<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" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
Answered By – harishr
Answer Checked By – Katrina (AngularFixing Volunteer)