CODEWITHSUNDEEP
javascriptangularjs
Saurabh Verma
Saurabh Verma

Reputation: 6728

Unable to remove # from Angular url

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 ?

Upvotes: 0

Views: 107

Answers (2)

Saurabh Verma
Saurabh Verma

Reputation: 6728

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.

Upvotes: 0

Claies
Claies

Reputation: 22323

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.

Upvotes: 2

Related Questions