AngularJS: html5Mode(true) causing 404 error

Question

I am trying to remove # tag on my app using $locationProvider.html5Mode(true). It takes out the # but now I get 404 errors for all my views.

angular.module('myApp', ['ngRoute']).
  config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.when('/', { templateUrl: 'views/home.html', controller: 'homeCtrl' });
    $routeProvider.when('/about', { templateUrl: 'views/about.html', controller: 'aboutCtrl' });

    $locationProvider.html5Mode(true);

}]);

Does not make a difference – Simo Mafuxwana Feb 23 '14 at 20:31 — Simo Mafuxwana, Feb 23 '14 at 20:31

score 2 · Accepted Answer · edited May 23 '17 at 12:33

2

It turns out if one is usung $locationProvider.html5Mode(true). You have to set a base url (<base href="/appFolder/" />)... according to this answer

edited May 23 '17 at 12:33

Community

1
1

answered Feb 24 '14 at 17:20

Simo Mafuxwana

3,702
6
41
59

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application – biology.info Sep 30 '16 at 14:11

Gautam Parmar · Answer 2 · 2018-09-06T09:54:22.303

For .net Project you'll need to also need to add rewrite rule in web config. Add below code to web.config & in head of single page section add href is of path of your single page

<system.webServer>    <rewrite>
<rules>
  <rule name="RewriteRules" stopProcessing="true">
    <match url=".*" />
    <conditions logicalGrouping="MatchAll">
      <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="/index.html" />
  </rule>
</rules>  </rewrite></system.webServer>

AngularJS: html5Mode(true) causing 404 error

2 Answers2

Linked