Issue with html5Mode in angularjs

Question

I'm trying to remove index.html of the url using html5Mode(true) in angularjs, this is the code:

angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.when('/home', {templateUrl: 'views/home.html'});
  $routeProvider.when('/about', {templateUrl: 'views/about.html'});
  $routeProvider.otherwise({redirectTo: '/'});
}]);

If I dont write $locationProvider.html5Mode(true); the url shows:

localhost:(port)/MyApplication/index.html

If I write $locationProvider.html5Mode(true); the url shows:

localhost:(port)

MyApplication is removed of the url. And I want the url shows:

localhost:(port)/MyApplication/

What I'm doing wrong? What's the problem?

UPDATE:

How should show my <a> tags? Right now I have:

<a href="#/about">About</>

When I click on the link, the url shows:

localhost:(port)/MyApplication/index.html#/about

I'm lost with this.

Thanks in advance!

please provide the code where you define the routes. (where you call $routeProvider.when()) — bekite, Oct 27 '13 at 12:05
@bekite I've updated the post, sorry for the delay. Greetings. — Alavaros, Oct 30 '13 at 08:21

score 13 · Accepted Answer · edited Aug 26 '14 at 19:06

13

If your application runs under /MyApplication/ try to set the base path in your index.html and switch on html5Mode:

<html>
  <head>
    <base href="/MyApplication/index.html" />
    ...

See Using $location.

edited Aug 26 '14 at 19:06

Andrey Luiz

461
9
25

answered Oct 30 '13 at 08:30

Reto Aebersold

16,306
5
55
74

i was expecting all hrefs like 'dir/file.jpg' to be translated to '/MyApplication/index.html/dir/file.jpg' but to my surprise the browser is doing '/MyApplication/dir/file.jpg' – user3338098 Jun 04 '15 at 17:26
the w3c doesn't appear to document this behavior @ http://www.w3.org/TR/html5/document-metadata.html#the-base-element or even @ http://www.w3.org/TR/html5/infrastructure.html#resolve-a-url – user3338098 Jun 04 '15 at 17:45
@Reto Aebersold And when you refresh web page ? problem still here. 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:09
@biology.info yes, that's what you have to do in a SPA – Reto Aebersold Sep 30 '16 at 16:50

Issue with html5Mode in angularjs

1 Answers1

Linked