CODEWITHSUNDEEP
angularjs
Simo Mafuxwana
Simo Mafuxwana

Reputation: 3762

AngularJS: html5Mode(true) causing 404 error

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);

}]);

Upvotes: 2

Views: 4790

Answers (2)

Gautam Parmar
Gautam Parmar

Reputation: 485

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>

Upvotes: 0

Simo Mafuxwana
Simo Mafuxwana

Reputation: 3762

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

Upvotes: 2

Related Questions