Angular HTML5 mode routing gives it resource cannot be found
I am developing an application in .net mvc with angularjs. When I don't use html5 mode it works fine, but when I set html5 mode to true, the server calls whatever address it gives me the resource it can't find.
This is my app.js
var app = angular.module("myApp", ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/test',
{
templateUrl: 'templates/TestPage.html',
controller: 'ProfesionalController'
});
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
});
And this is my view (layout):
<!DOCTYPE html>
@Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/angular/angular.js"></script>
<script src="~/Scripts/angular/angular-route.js"></script>
<script src="~/app/app.js"></script>
<script src="~/app/home/home.js"></script>
<script src="~/app/profesional/profesional.js"></script>
<base href="/">
<a href="test">Test</a>
@*this is the link*@
</div>
</div>
</div>
<div ng-app="myApp" class="container body-content">
<div ng-view></div>
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
When I click to test the link, the server tries to find: http: // localhost: 39881 / test "giving me 404 Not Found - http: // localhost: 39881 / test "
What I am missing. It works fine without html5 mode.
source to share
Even I faced the same problem when I tried to enable html5 mode in my application. Later, when I looked closely at all the code, I found out the name of my API call and my route was the same. The browser got confused and instead of calling the call route, it was calling the api call.
Try changing your name. It should work fine.
source to share
You need to set up server side rewriting so that it doesn't try to load pages along that path. See here for more details for your server type: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
source to share
Something that cost me a lot of time, which will hopefully help others if you are using Azure and a pure ng app:
I am using Azure and Angular and am facing the same problem. I had IIS rewrite rules to redirect all requests to the index.html file as per the documentation in ng.
However, he still did not work on production, only locally. This turned out to be a silly user error - my Angular webapp is a pure HTML / JS application (i.e. ASP.NET MVC) and the Azure publish profile is not flagged by the web.config for dpeloyment for the cloud. I used Kudu on Azure to test the webapp and there was no web.config on live, so no rewrite rules were considered ... changing it to FileType Content solved the problem, so web.config was deployed correctly and routing now works ..
source to share