Angular adding extra logic to 404 handling on non angular routes

Question

I have an angular site hosted in S3, and I have a 404 route set up (I use hash), if someone for example does

mysite/#/gibberish

goes to

mysite/#/404

and on the s3 bucket we have a redirect rule in place for

mysite/gibberish

goes to

mysite/404.html

all is well

Now I just want to add an extra logic on top that if someone types in

mysite/customerid

which is a 404 to somehow redirect this to an angular controller so I can send this request to right page.

So somehow in my redirect in S3 rule add a reg exp for some incoming request and rather than serve 404.html send it i.e. mysite/#/handlethis

Is this possible ?

Answer 1

Depending on the router of your choice, you could do something like the following (which is what we've done (well, not precisely this, but close)):

ui-router

app.config(function ($urlRouterProvider) {
  var regx = /\/#\//; // match against /#/

  $urlRouterProvider.otherwise(function ($state, $location) {
    if (!regx.test($location.path()) { // if no match
      $state.go('customHandlingState', /** params **/, /** configuration **/ }); 
      // Transition to your custom handler state, with optional params/config. 
    }
  });
});

You could pair this up with custom stateChange[Start|Stop|Error|Success] handlers in the run block of your app to customise it to your liking.

I would supply an example of how to do this with ngRoute, but I gave up on ngRoute two years ago and haven't looked back since. As such I have no suggestion to give, nor was I able to find a solution to the problem you present.

I would strongly suggest you scrap the S3 portion of this recipe as it will make your life a lot easier when it comes to client side routing (speaking from personal experience here, it's my opinion on the matter - not fact) and handle your 404's/500's on the client with custom state handlers.

If need be you could hook into some logging service and store some data whenever a client/person ends up in an erroneous state.

I suppose my 'counter question' is; What do you gain from using S3 redirect rules? So as to get a better understanding for the needs and goals here.

---

Some reference material to go along:

• ui-router#$state.go
• ui-router#$urlRouterProvider.otherwise