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
– bekite, Commented Oct 27, 2013 at 12:05
@bekite I've updated the post, sorry for the delay. Greetings. — Ala Varos
– Ala Varos, Commented Oct 30, 2013 at 8:21

Andrey Luiz · Accepted Answer · 2014-08-26 19:06:25Z

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, 2014 at 19:06

Andrey Luiz

4711 gold badge9 silver badges25 bronze badges

answered Oct 30, 2013 at 8:30

Reto Aebersold

16.7k5 gold badges58 silver badges76 bronze badges

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

4 Comments

user3338098 Over a year ago

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 Over a year ago

the w3c doesn't appear to document this behavior @ w3.org/TR/html5/document-metadata.html#the-base-element or even @ w3.org/TR/html5/infrastructure.html#resolve-a-url

biology.info Over a year ago

@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

Reto Aebersold Over a year ago

@biology.info yes, that's what you have to do in a SPA

Collectives™ on Stack Overflow

Issue with html5Mode in angularjs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related