ngSwitch error when using Angular with Polymer's platform.js loaded

[theefer]

Context: As part of a large AngularJS application, we're trying to bring in a small Polymer Web Component. platform.js is loaded first in the page, and Angular is manually bootstrapped on a wrapped document node.

It all works fine in latest Chromium (likely because the platform.js polyfills don't do much as most/all? APIs exist natively), but fails with an error in FF 31. I've isolated the error to nested ngSwitch, which result in a slightly weird minimal failing reduced case that you can see at http://jsbin.com/roxif/6/edit

The offending code is the following:

<div ng:switch="3">
  <div ng:switch-when="3">
    <div>
      <div ng:switch="3">
        <div ng:switch-when="3">3</div>
      </div>
    </div>
  </div>
</div>

Note that the extra wrapping div in between the nested ngSwitches is required for the error to occur. Without that extra element, the error disappears.

The following error gets thrown:

Error: node is undefined
compositeLinkFn@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:5989:13
nodeLinkFn@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:6573:9
compositeLinkFn@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:5983:1
nodeLinkFn@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:6573:9
compositeLinkFn@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:5986:15
publicLinkFn@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:5891:30
ngViewFillContentFactory/<.link@https://rawgit.com/angular/bower-angular-route/v1.2.16/angular-route.js:921:7
nodeLinkFn@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:6580:1
compositeLinkFn@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:5986:15
publicLinkFn@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:5891:30
boundTranscludeFn@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:6005:13
controllersBoundTransclude@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:6600:11
update@https://rawgit.com/angular/bower-angular-route/v1.2.16/angular-route.js:871:17
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@https://rawgit.com/angular/bower-angular/v1.2.16/angular.js:12691:15
updateRoute/<@https://rawgit.com/angular/bower-angular-route/v1.2.16/angular-route.js:552:15
etc...

It looks like the error maps to the last line of the following function (node.childNodes where node is undefined):

      function compositeLinkFn(scope, nodeList, $rootElement, boundTranscludeFn) {
        var nodeLinkFn, childLinkFn, node, $node, childScope, childTranscludeFn, i, ii, n;

        // copy nodeList so that linking doesn't break due to live list updates.
        var nodeListLength = nodeList.length,
            stableNodeList = new Array(nodeListLength);
        for (i = 0; i < nodeListLength; i++) {
          stableNodeList[i] = nodeList[i];
        }

        for(i = 0, n = 0, ii = linkFns.length; i < ii; n++) {
          node = stableNodeList[n];
          nodeLinkFn = linkFns[i++];
          childLinkFn = linkFns[i++];
          $node = jqLite(node);

          if (nodeLinkFn) {
            if (nodeLinkFn.scope) {
              childScope = scope.$new();
              $node.data('$scope', childScope);
            } else {
              childScope = scope;
            }
            childTranscludeFn = nodeLinkFn.transclude;
            if (childTranscludeFn || (!boundTranscludeFn && transcludeFn)) {
              nodeLinkFn(childLinkFn, childScope, node, $rootElement,
                createBoundTranscludeFn(scope, childTranscludeFn || transcludeFn)
              );
            } else {
              nodeLinkFn(childLinkFn, childScope, node, $rootElement, boundTranscludeFn);
            }
          } else if (childLinkFn) {
            childLinkFn(scope, node.childNodes, undefined, boundTranscludeFn);
          }
        }

Note that this fails even with the latest stable Angular version (1.2.22) as per this other example and also with the latest unstable Angular version (1.3.0-beta.18) as per this example.

It seems likely that this is a broken edge case of the wrapping platform.js does to polyfill Shadow DOM in FF?

Any hints as to where this error comes from and how to solve it?

I will cross-file this issue in the Polymer bug tracker as they may also be interested to know about this.

Thanks in advance.

[theefer]

/cc @addyosmani :-)

[btford]

This is a bug with platform.js then, correct?

[theefer]

I suspect it may be, although it was only exhibited when used in conjunction with AngularJS. I'm going to prod the related platform.js issue, thanks.

[jmesserly]

what seems to be happening is in compileNodes compositeLinkFn callback, linkFns ends up a different size from the stableNodeList. I'm not familiar with the Angular code to know what this might mean...

One constraint of the ShadowDOM polyfill is that the .childNodes list isn't live. So that's something to look for in the Angular code. However this particular function seems to want a snapshot, so the limitation might not be relevant.

[jmesserly]

another note: the node without children is <!-- ngSwitchWhen: 3 -->. tree structure at this point is <!-- ngView: --><div class="ng-scope" ng:view=""><p class="ng-scope">OK</p><div class="ng-scope" ng:switch="3"><!-- ngSwitchWhen: 3 --></div></div>

[jmesserly]

One constraint of the ShadowDOM polyfill is that the .childNodes list isn't live. So that's something to look for in the Angular code.

Ah, I think that's the issue. In compileNodes there's this comment:

// we must always refer to nodeList[i] since the nodes can be replaced underneath us.

however, under ShadowDOM polyfill that won't work -- nodeList[i] will always return the same value.

now that I look at the example again, I noticed it uses Angular 1. fwiw, I'm not sure Angular 1 is designed to work with platform.js in mind. I'm pretty sure this works in Angular 2, because it has been tested against platform.js. For reference: https://github.com/Polymer/ShadowDOM#known-limitations.

Could someone from Angular comment how feasible it would be to refactor the code to not rely on live NodeLists? I'm guessing it would be pretty simple (instead of nodeList[i] use node.childNodes[i]), but without a deeper dive I'm not sure.

[theefer]

Thanks a lot @jmesserly for looking into this!

I'm pretty sure this works in Angular 2, because it has been tested against platform.js.

Is there an Angular 2 preview branch somewhere? Unfortunately it is still failing in Angular 1.3-beta.18 (http://jsbin.com/baviy/1/edit).

[jmesserly]

Ah, that's a good question. I'm not sure, just saw the announcement http://blog.angularjs.org/2014/03/angular-20.html and it has a link to the design docs, which are all public. There's also http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/ and https://github.com/angular/angular.dart but I don't know if there's an AngularJS 2 repo up somewhere...

[jmesserly]

... and it's still be good to get this fixed in 1.0 if it's possible ... I might try a pull request, but was just wondering if someone from AngularJS project could tell me if the proposed changes sounded crazy before I started. :)

[caitp]

but I don't know if there's an AngularJS 2 repo up somewhere..

There are lots of angular 2.0 repos up, and they're all public.

https://github.com/angular/di.js
https://github.com/angular/prophecy
https://github.com/angular/router
https://github.com/angular/templating
https://github.com/angular/http
https://github.com/angular/watchtower.js
https://github.com/angular/projects

I'm not sure if zone.js counts, but lets say it does.

---

The one that for this question you probably care about is "templating"

[jmesserly]

Awesome, thank you!