$routeProvider.when() breaks instanceof operator

[NicBright]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
$routeProvider.when(path, route) now uses a shallow copy instead of angular.copy() which was used previously.

In the company I'm working we relied (until now) on the fact that we could use the instanceof operator on the route object. We use this for an important feature toggle to be able to "deactivate" certain parts of our application based on the route class.

Here's the code we use and which worked just fine prior to v1.5.7 where the shallowCopy-change was introduced (see below).

        $rootScope.$on('$routeChangeStart', function (event, nextRoute) {
            if ((nextRoute instanceof McsRoute))
            {
                if (McsSettingsService.isDeactivated()) {
                    $location.url('/tmp/mcs/comingsoon');
                }
            }
        });

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).
This code shows that angular.copy does not break instanceof operator:

var MyClass = function() { };
var myinstance = new MyClass();
angular.copy(myinstance) instanceof MyClass; // true

This code shows that shallowCopy DOES break instanceof operator (I slightly modified the version from shallowCopy.js to work in the console):

var MyClass = function() { };
var myinstance = new MyClass();

function shallowCopy(src, dst) {
  if (Array.isArray(src)) {
    dst = dst || [];

    for (var i = 0, ii = src.length; i < ii; i++) {
      dst[i] = src[i];
    }
  } else {
    dst = dst || {};

    for (var key in src) {
      if (!(key.charAt(0) === '$' && key.charAt(1) === '$')) {
        dst[key] = src[key];
      }
    }
  }

  return dst || src;
}

shallowCopy(myinstance) instanceof MyClass // false

What is the expected behavior?
The code snippet above (nextRoute instanceof McsRoute) should work.

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.

The problem was introduced in v1.5.7 with 6d0dcca

Other information (e.g. stacktraces, related issues, suggestions how to fix)
#14478
#14699
#14750

As a fix I can think of two possible solutions:

1. My favourite: I don't think that route objects need to be protected from being modified after they've been registered with the $routeProvider. No need to deep clone. No need to shallow copy. Just use the objects provided
2. If the protection from being modified afterwards should stay, one could do the following:
   i) create a new object "newObject" and make sure it has the same [[Prototype]] as the route object
   ii) shallowCopy(route, newObject)

[gkalpak]

To recap the history of this:

• Initially, extend was used, because apparently you were able to augment existing routes: 70e401e
• At some later point, we had extend but without the ability to augment existing routes. I haven't dug into whether it was necessary, but it was possibly to protect the router from getting into an unknown state (as explained here).
• Then, we switched to deep copying, in order to take inherited properties into account: b477058
• And finally, we switched to shallow copying in order to avoid corrupting special objects (such as SCE containers), while still taking inherited properties into account and avoiding getting into an unknown state: 6d0dcca

I am not keen on making any change that would break any of the above properties of route-copying. Also, nothing in the docs implies that the value passed to the $route event callbacks will be the original
route object (or of the same type).

It seems that the easiest way to solve this would be to add a property on McsRoute instances (e.g. isMcsRoute = true) and the change the check form nextRoute instanceof McsRoute to nextRoute.isMcsRoute.

That said, I would not be opposed to preserving the prototype (without breaking any existing usecases). E.g. something like the folowing might work (off the top of my head):

 this.when = function(path, route) {
   // copy original route object to preserve params inherited from proto chain
-  var routeCopy = shallowCopy(route);
+  var routeCopy = shallowCopy(route, Object.create(Object.getPrototypeOf(route)));
   ...

If @NicBright (or anyone else) feels like giving it a try, I would be happy to review the PR 😃