SharePoint Search refiner does not work after loading Angular library

Question

SharePoint search refiner adds slash(/) between #k and #s parameters then refinement panel does not work property with out of the box behavior.

After work around found that this happens after AngularJS libraries are loaded.

Answer 1

This happens because of Angular forces HashBang mode by default and it listens for URL changes then override the hash(#) queries which append by SharePoint refiner. You can avoid this by enabling HTML5Mode but its not a permanent solution.More details on angular location provider

$locationProvider.html5Mode(true).hashPrefix('*');

Permanent solution would be disabling all location manipulations in angular app which can be achieved by following code snippet.

angular.module('app', [])
.config( ['$provide', function ($provide){
    $provide.decorator('$browser', ['$delegate', function ($delegate) {
        $delegate.onUrlChange = function () {};
        $delegate.url = function () { return ""};
        return $delegate;
    }]);
}]);

Note: Just use this in your app config of angular (i.e. app.js or in angular config location)