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
– Simo Mafuxwana

2014-02-23 20:31:24 +00:00
Commented Feb 23, 2014 at 20:31 — Simo Mafuxwana
– Simo Mafuxwana, Commented Feb 23, 2014 at 20:31

Community · Accepted Answer · 2017-05-23 12:33:51Z

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, 2017 at 12:33

CommunityBot

11 silver badge

answered Feb 24, 2014 at 17:20

Simo Mafuxwana

3,7927 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

biology.info Over a year ago

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application

Gautam Parmar · Accepted Answer · 2018-09-06 09:54:22Z

0

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>

edited Sep 6, 2018 at 9:54

answered Sep 5, 2018 at 11:00

Gautam Parmar

48510 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS: html5Mode(true) causing 404 error

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related