HTML 5 mode deep link and refresh not working AngularJS
Question
I am using ng-viewport to display my pages in the index.html, in HTML 5 mode everything is working fine when we open the base url (eg http://localhost:86 ), which loads and get onverted to ( http://localhost:86/app/dashboard ) which is my home or landing page, and all the other re-directions works properly .
The problem arises when we directly try to open the complete URL (eg http://localhost:86/app/dashboard ), it is loading my index.html page, but displaying only static content like logo, and images, and not showing my dynamic web pages which are shown in ng-viewport section. There is a same behavior on reload of any page.
Following is code which I have wrote.
JS code.
$locationProvider.html5Mode({ enabled: true });
HTML code
<head>
<base href="/"/>
</head>
<body>
<div>
<img class="rotate" src="../assets/img/logo_img.png" />
</div>
<div style="height: 100%" ng-viewport autoscroll>
</div>
</body>
Web.Config
<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
<defaultDocument>
<files>
<clear />
<add value="index.html" />
<add value="Default.htm" />
<add value="Default.asp" />
<add value="index.htm" />
<add value="iisstart.htm" />
<add value="default.aspx" />
</files>
</defaultDocument>
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="App_Data" />
</hiddenSegments>
</requestFiltering>
</security>
<rewrite>
<rules>
<clear />
<rule name="AngularJS" enabled="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(Api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
Route config code
static $routeConfig = [{
path: '/dashboard/:type',
component: 'dashboard'
}, {
path: '/dashboard',
component: 'dashboard'
}, {
path: '/mail',
component: 'mail'
}, {
path: '/solution/:id',
component: 'solutionDetails'
}]
1 answers
solution1
0 2017-03-06 11:36:40
The issue was related to the relative and absolute path of my js and css files. I have added / in front of my all file paths which I am loading in index.html, and now everything works like a charm.
**Earlier :** <script src="app.js"></script>
**Now:** <script src="/app.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.