IE10 and below errors on use of $meteor.collection

[pbastowski]

When using the urigo:angular package with IE10 or IE9, I get the error below, when I try to use $meteor.collection. I get no such error(s) when using Chrome or Firefox.

TypeError: Object doesn't support property or method 'stop'
  at Anonymous function (http://192.168.1.14:3000/packages/urigo_angular.js?4b36953210173c874060f2e4feb315d53f8eca68:1220:11)
  at Anonymous function (http://192.168.1.14:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:277:9)
  at nonreactive (http://192.168.1.14:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:525:5)
  at invalidate (http://192.168.1.14:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:276:7)
  at stop (http://192.168.1.14:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:293:5)
  at Computation (http://192.168.1.14:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:229:7)
  at autorun (http://192.168.1.14:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:499:3)
  at Anonymous function (http://192.168.1.14:3000/packages/urigo_angular.js?4b36953210173c874060f2e4feb315d53f8eca68:1216:7)
  at Anonymous function (http://192.168.1.14:3000/client/parties/controllers/partiesList.js?cdbc134beb13cb206b4510912ec221f84b1a5e55:9:17)
  at invoke (http://192.168.1.14:3000/packages/angularjs_angular.js?f73c7e52641179adbe9af8405d6b6509730db348:4408:9)<div class="ng-scope" ui-view=""> 

If I comment out the line with $meteor.collection the error goes away.

See my code snippets, below:

;(function() {
    'use strict'

    angular.module("socially").controller("PartiesListCtrl",
            function ($scope, $meteor, PartiesService, $log) {

                $scope.parties = $meteor.collection(PartiesService.parties);

                $scope.remove = function (party) {
                    $scope.parties.remove(party);
                };

            });
}());

And here is PartiesService:

    angular.module('socially')
        .factory('PartiesService', PartiesService)
    ;

    function PartiesService() {

        var parties = {
            parties: new Mongo.Collection("parties")
        };

        return parties;
    }

The questions are:

1. Is this a known error with Internet Explorer?
2. Is there a known fix available?

Thanks.

[richarddewit]

Might be unrelated, but you don't have to define a new Mongo.Collection("parties") in your Angular code if you made the model file for both client and server like in the tutorial:

// File models/parties.js
Parties = new Mongo.Collection("parties");

This makes the global Parties available also in your Angular code.

[pbastowski]

@Geen-Henk thanks, and I realise that :) I am trying to not have my collections on the global scope in the browser, but nicely wrapped in Angular services that I can inject as required.

The problem I have is that what works in Chrome and firefox does not work in Internet Explorer 10. IE8, I could understand, but IE10 - we can probably fix that, right?

[Urigo]

@pbastowski interesting structure, can you share a Github repo with the code so I can play around with it?

[pbastowski]

@Urigo This is a different repo, but it has the same problem in IE9 and IE10:
https://github.com/pbastowski/meteor-upload-files

Look in file https://github.com/pbastowski/meteor-upload-files/blob/master/common/file-upload-service.ng.js#L37

If you comment out $meteor.collection, as per below, you no longer get the error. Yes, the app won't work any more, but hopefully this points you in the right direction :)

                images: {}, //$meteor.collection(function () { return Images.find() }),

[Urigo]

Does it also happen in a collection without GridFS?
Maybe it's better to reproduce it with a regular collection first?

[pbastowski]

It also happens with a Mongo.Collection. I have made a small change to show this, please see branch test/meteor-collection (pbastowski/meteor-upload-files@588c04f)

[pbastowski]

@Urigo To make things easier to test, I made a really simple repo, below, that shows the problem with $meteor.collection() and IE9/10. Please ignore the previous repo.
https://github.com/pbastowski/test-angular-meteor-ie9

[Urigo]

Great, I'll try to get on a Windows computer in the weekend and look at the problem, until then, would love help from Windows community members

[pbastowski]

No need for a windows machine, just grab a free Windows VM from this site: https://www.modern.ie/en-gb/virtualization-tools#downloads :)

[pbastowski]

@Urigo, I have done some tracing and the problem appears to be with how the AngularMeteorCollection object's proto is modified (see code below), which is not compatible with IE <11, I believe. I am not sure atm how to fix this, but thought I'd share the find. The same applies to AngularMeteorCollection.

var AngularMeteorCollection = function(cursor, collection, $q, $meteorSubscribe, $meteorUtils, $rootScope, $timeout) {
    var self = [];

    self.__proto__ = AngularMeteorCollection.prototype;
    self.__proto__.$q = $q;
    self.__proto__.$meteorSubscribe = $meteorSubscribe;
    self.__proto__.$rootScope = $rootScope;
    self.__proto__.$timeout = $timeout;

    self.$$collection = angular.isDefined(collection) ? collection : $meteorUtils.getCollectionByName(cursor.collection.name);

    return self;
};

var AngularMeteorCollection = function(collection, $q, selector, options) {
    var self = collection.find(selector, options).fetch();

    self.__proto__ = AngularMeteorCollection.prototype;
    self.__proto__.$q = $q;
    self.$$collection = collection;

    return self;
};

[pbastowski]

@Urigo, for example, the code below works fine in Chrome, but fails in IE10:

Chrome dev console:

function o () { var self = []; self.__proto__ = o.prototype; self.__proto__.x = 123; return self; }
> undefined

a = new o
> []

a
> []

a.x   // I expect to see 123
> 123

IE10 dev console:

>> function o () { var self = []; self.__proto__ = o.prototype; self.__proto__.x = 123; return self; } 
>> a = new o 
 {
    __proto__ : [object Object]
} 
Add to watch
>> a 
 {
    __proto__ : [object Object]
} 
Add to watch
>> a.x // I expect to see 123, same as in Chrome, but actually nothing gets returned

[Urigo]

@pbastowski can you please check this branch : https://github.com/Urigo/angular-meteor/tree/bugFix/fix-proto-ie
I've just changed the collection, if it works, I'll do the same with object

[Urigo]

Forget it, it's not a good solution.. I'm on it

[pbastowski]

I was just reading through a lot of info on IE and it's bad proto support. Basically, with IE<11 you can't change the proto of an object.

So, just wondering, is the current implementation of AngularMeteorCollection trying to create an Array like object, but extended with it's own properties?

[pbastowski]

@Urigo I think I have a fix... preparing to push a branch. It appears to work in IE9 and IE10.