How do I activate otherwise on ui.router for Angular 1?

Solution for How do I activate otherwise on ui.router for Angular 1?
is Given Below:

I have a situation where a third party library adds “#checkout” at the end of the URL (it’s Snipcart) but Angular cannot seem to detect it and it just goes back to the /test page (localhost:3000/test).

The reason the URL is: /test is intentional as I have html5mode enabled.

This works well in a normal static HTML project (so not Angular) but when I used ui.router with Angular 1.x, it doesn’t work.

My angularApp.js file:

var mainApp = angular.module('mainApp', ['ui.router']);

mainApp.config(function($locationProvider, $stateProvider, $urlRouterProvider) {

  $locationProvider.html5Mode(true);

  $urlRouterProvider.otherwise(function(){

    console.log('otherwise activated');

  });

    var helloState = {
        name: 'root',
        url: "https://stackoverflow.com/",
        templateUrl: '/partial/main.html',
        controller: 'mainController'
    }

    var aboutState = {
        name: 'test',
        url: '/test',
        views: {
            '@': {
              templateUrl: '/partial/yamuna.html',
              controller: 'testController'
            }
          }
    }
      
    $stateProvider.state(helloState);
    $stateProvider.state(aboutState);

});

mainApp.controller('mainController', ['$scope', '$rootScope', function($scope, $rootScope){

  console.log('mainController activated');
  
}]);

mainApp.controller('testController', ['$scope', '$rootScope', function($scope, $rootScope){

  console.log('testController activated');
  
}]);

So the paths below work as expected:

  • localhost:3000/ ##mainController activated
  • localhost:3000/test ##testController activated

But, Snipcart appends the path to:

localhost:3000/test#checkout – which I want to be able to go to the otherwise route and not fall back to localhost:3000/test#

Any way around this? As Angular 1 is quite old, I will have to come up with a workaround myself.

Edit

I can detect the path change with: (FYI this one below is in ngRoute as I was playing around with the various options):

mainApp.run(
    ['$rootScope', '$location', '$window', function($rootScope, $location, $window) {
    $rootScope.$on("$routeChangeStart", 
    (event, current, previous, rejection) => {
        console.log($window.location.href);
    })
}])

But – what do I do after that? I can filter out only that specific path where #/checkout is hit but where do I redirect the site to? Not sure if this is even worth an edit but I thought I will mention it for completeness.

My ONLY option it seems is to upgrade to Angular 8 or higher but as I am so close to the deadline, I will like to explore all the options with Angular 1.x first.

Thanks