Unable to remove # from Angular url

Question

When I have the code like this:

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html',controller: 'PhoneDetailCtrl'
      }).
      otherwise({redirectTo: '/phones'
      });
  }]);

I'm able to get the phoneslist by going to url: http://localhost:8000/app/#/phones

However, for removing # from url. if I replace the above code by this:

phonecatApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: 'PhoneListCtrl'}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl'}).
      otherwise({redirectTo: '/phones'});

    $locationProvider.html5Mode({
         enabled: true,
         requireBase: false
    });
  }]);

And I go to url:http://localhost:8000/app/phones/ I see the Index of /app/phones/instead of my normal webpage. Any idea where I'm going wrong ?

need to set server up to reroute to app entry point since you now have virtual directories in url — charlietfl
– charlietfl, Commented Apr 27, 2015 at 1:45
Thanks charlietfl, but can you please explain me how to do that ? — Saurabh Verma
– Saurabh Verma, Commented Apr 27, 2015 at 1:47
depends on server type, use htaccess for example in apache or web.config in IIS — charlietfl
– charlietfl, Commented Apr 27, 2015 at 1:48
I'm starting the server by npm start, following this tutorial: docs.angularjs.org/tutorial/step_07 — Saurabh Verma
– Saurabh Verma, Commented Apr 27, 2015 at 1:49
Thanks Claies, can you provide me the steps for getting HTML5Mode to work ? — Saurabh Verma
– Saurabh Verma, Commented Apr 27, 2015 at 2:08

Claies · Accepted Answer · 2015-04-27 02:29:51Z

2

If you look in the Packages.json for the angular-phonecat application, you will see "start": "http-server -a 0.0.0.0 -p 8000". This launches a basic node module http-server.

http-server is a simple, zero-configuration command-line http server.

It does not provide much in the way of options. However, you can use -P (note case) to create a proxy.

-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com

so changing the start line to "start": "http-server -a 0.0.0.0 -p 8000 -P http://localhost:8000/app/" would work for testing at least.

When you make a request to http://localhost:8000/app/phones, the server will proxy it to your /app/ directory since it cannot be resolved. Once the app loads, the client side router will kick in, and use HTML5 rewrites to redirect you to the requested page.

In case of the angular-phonecat application, it was not designed with HTML5Mode in mind, and it contains a physical directory which conflicts with the virtual routes created in the example. No matter what server you deploy the app to, HTML5Mode expects that there is no physical directory match to your virtual routes, since those are resolved by the server before the Angular app can intervene.

edited Apr 27, 2015 at 2:29

answered Apr 27, 2015 at 2:11

Claies

22.4k4 gold badges56 silver badges81 bronze badges

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

8 Comments

Saurabh Verma Over a year ago

I made these changes: "start": "http-server -a 0.0.0.0 -p 8000 -P localhost:8000/app -i false", still localhost:8000/app/phones is showing the index page

Claies Over a year ago

I just looked again, this project has a physical directory mapped to /app/phones which would stop HTML5Mode from working correctly. You will either need to change your directory name, or change the virtual URL you are using.

Saurabh Verma Over a year ago

Right, so I changed the directory phones to phones_json, and now I'm getting 'Not found' in the browser on going to localhost:8000/app/phones

Claies Over a year ago

did you restart the server after changing the start options? and you do need the full url, including the http:// for the Proxy option to work; I'm sure you included it but SO probably dropped it from the comment.

Claies Over a year ago

hmmm, try it without the auto-index option.

|

Saurabh Verma · Accepted Answer · 2015-04-27 12:12:38Z

0

Okay. So I was solving this problem the wrong way. While following the Angular Tutorial they have used npm http-server and not the apache server. So, to enable html5 configuration, in this case this npm http-server server has to be configured - and I could not find any place where it's documented to do this.

So, I shifted from npm http-server to apache server and followed this: Server configurations for html5.

Again the bottom line is: Dont waste your time enabling html5 mode while using the basic module of http-server, which is given in official tutorial.

answered Apr 27, 2015 at 12:12

Saurabh Verma

6,81813 gold badges57 silver badges89 bronze badges

1 Comment

Claies Over a year ago

I'm glad you were able to get this working, and this was essentially what I was trying to say from the start, but I wanted to at least make an effort to try working it out. I did say in my answer that the basic server didn't have a lot of configuration options with it.

Collectives™ on Stack Overflow

Unable to remove # from Angular url

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related