Angular Component Router Remove # from the URL

Question

I'm using Angular 1.5 for routing with Angular New Router. I'm confronting a problem with removing # from the URL in order make them SEO friendly. There are 2 views namely first.html and second.html in the components folder and are the part of angular router then there is a 3rd view Navigation.html, which is not the part of Angular Routing instead it is a seperate HTML. The links to these views are given at the header of the page. First 2 are Angular Views and 3rd on is for Navigation.html (Not Part of Angular Routing). I've successfully removed the # tag from the URL by using $locationProvider.html5Mode(true). But After doing this, it can't navigate to Navigation.html instead it redirects it to the First.html. It is a very simple code which uses Bootstrap, Grunt and Angular. I've pushed it GitHub. Anyone can see that by cloning. I'll be very thankful to you. Also suggest me if there is any better way.

https://github.com/kjanshair/Angular-New-Router-Example

All I want is to remove the # from the URL and be able to Navigate to Navigation.html.

Actually it is using Angular NgRoute in this example. I'm using Angular New Router (Angular Component Router). — Janshair Khan
– Janshair Khan, Commented Nov 30, 2015 at 13:36

Sagi Levi · Accepted Answer · 2015-11-30 13:36:54Z

1

All you need to do is to add $locationProvider to your config function and inside it call: $locationProvider.html5Mode(true);

angular.module('myapp',[]).
    config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider.when().otherwise() # define routing
        $locationProvider.html5Mode(true);
    }]);

answered Nov 30, 2015 at 13:36

Sagi Levi

3051 silver badge11 bronze badges

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

1 Comment

Janshair Khan Over a year ago

Please can you see the code on GitHub? I've implemented it. Moreover, I'm using Angular-New-Router. I've tried your solution several times.

Collectives™ on Stack Overflow

Angular Component Router Remove # from the URL

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related