Upgrade from loneleeandroo/ngMeteor: Errors and what to expect?

[tehXor]

We have a meteor 0.8.x app that is just running for the past month which uses loneleeandroo/ngMeteor.

However now it needs further developing and therefore there is no real way around an upgrade to Meteor 1.0. From what we read so far and some tests loneleeandroo/ngMeteor is not really compatible with Meteor > 0.9.x and this looks like a promising alternative project. But simply replacing packages and some adjustments don't seem sufficient. After replacing the packages in our test we replaced the initialization ngMeteor.requires.push('OurApp'); with angular.bootstrap(document, ['OurApp']); and added angular-meteor to our app: angular.module('OurApp', [ 'angular-meteor', '...']). The first error we got hit by is a "Uncaught TypeError: The first argument of $collection must be a Meteor.Collection object" in angular-meteor-collections.js:9.

As not developing meteor for some month seems like ages atm, some basic questions to people who are currently up to date with Meteor and angular-meteor before we dig further:
How much adjustments/refactoring needs to be done to make a ngMeteor project compatible with angular-meteor? (Not in terms of time anything relative to the project size but in terms of how much differences are between both projects.)
Can it be worth it or are there other alternatives for old ngMeteor projects?
Is there maybe somewhere a guid/simple blog entry of people who did such an upgrade with some helpful tips for getting around common errors?

Information would be much appreciated!

[Urigo]

@tehXor that's a good point.
So first, about your error, it seems like you haven't places a collection object inside the $collection(collectionObjectVariable).bind

About migrating, it depends a lot of what version on ngMeteor are you using.
If it is version 0.1 there is more to do than if you are at 0.2.

In both case, I think that it is not so hard to do..

Writing a manual is a good idea, maybe we can talk soon on Google Hangouts or something and I can help you find the problems and out of that write something for everyone?

[Urigo]

As I've got no response I'm closing it for now and opening a card on writing a manual in the public Trello board.

Would love to chat when you can

[tehXor]

Sorry for not replying, we delayed the project for some weeks but it will for sure not be canceled.
I will either post our findings/success or come back at you as your offer to give some tips really sounds great, thanks a lot!

[phaggood]

I started the tutorial and got detrailed at http://angularjs.meteor.com/tutorial/step_07 with the same issue ("Uncaught TypeError: The first argument of $collection must be a Meteor.Collection object"). I just installed meteor and urigo at the start of the tutorial so I should have the latest versions. Is there somewhere I could upload a zip of my project? ( I don't see how I could get this working in a plunkr).

Here's a screenshot of my file structure. model/models.js contains the collection declaration (Projects = new Mongo.Collection("projects");) and server/startup/initProjects contains the code to pre-populate the empty collection

[Urigo]

@phaggood you can upload the code to an open Github repo and send me the link, I would love to have a look

[phaggood]

https://github.com/phaggood/brkncollection

[phaggood]

It also appears I'm getting the same 'duplicate angular' warning as reported in #138; I checked my bower and there's no extra angular reference in it per the original reporter's reply.

[Urigo]

I'm going to give a lecture now at Google so in a few hours I will try to run your solution and see what's the problem.
Maybe until then someone will already do it :)

[phaggood]

Has there been any resolution on this issue? I was hoping to continue on the tutorial this weekend.

[netanelgilad]

@phaggood Your issue is with the templateUrls at your app.js file.
You are using relative urls to the app.js file but when meteor builds the app that is not where the js file is being served from, and that's why the url is incorrect.
What then happens is meteor is serving the index.html everytime it gets a request for a url it doesn't know so you get the index.html file inside the ui-view of the index.html and that's causing the 'angular loaded more than once' error.
Try changing the url of the templateUrl to absolute paths like 'client/projects/...' and it should work.
Hope this helps..

[phaggood]

That did it; thanks!

[tehXor]

So meanwhile we did the upgrade from Meteor 0.8.x to 1.0.3.x and with that replaced loneleeandroo:ngmeteor with urigo:angular. It indeed was not too hard to do and took us round about one day for a fairly big app. For the rare case that someone stumbles upon this thread with a similar task ahead, I'll real quick sum up our steps we needed to perform:

• Obviously update all packages and Meteor
• Remove loneleeandroo:ngmeteor, add urigo:angular
• Include AngularJS modules which came with loneleeandroo:ngmeteor but are not included in urigo:angular (at least it looks like that) manually like you would in a non-Meteor vanilla AngularJS project as well; in our case this was angular-route.js, angular-sanitize.js and ui-bootstrap-tpls.js (also I'm not sure if the last one was necessary due to another depreciated Meteor 0.8.0 module)
• Remove the old AngularJS app initialization: ngMeteor.requires.push('OurApp');
• Add 'angular-meteor' as dependency to your main AngularJS app
• While it didn't matter with loneleeandroo:ngmeteor where you initialized your app in your main HTML, it does now. So make sure you set your <div ng-app="OurApp">-tag so that it includes everything of your app (we started the app directly under <body>)
• Rename all your /app/client/views/.html files to /app/client/views/.ng.html files and remove any <template>-tags you may have in them
• In all your new .tpl files replace any [[ and ]] with {{ and }} (also we had several thousands of those this works nearly without complications, just be careful when you had brackets inside ng- directives, those should work completely without them now)
• As we work with ngRoute (in hindsight we probably would have gone for ui-route, too however we are not too unhappy with ngRoute as well) we now had to change all templateUrl parameters from the former template names to the new template path; e.g. "ourOldTemplateName" to "client/views/our-new-template-path.tpl"
• Instead of injecting $collection in all your AngularJS modules where you need Meteor collections, now inject $meteorCollection
• Now instead of adding a collection to the scope like so $collection("yourCollection", $scope), do it like so $scope.yourCollection = $meteorCollection(yourCollection); if you had some client side collection filtering like $collection("yourCollection", $scope, '_id': myId) you can do it this way now: $scope.yourCollection = $meteorCollection(function() { return yourCollection.find({ _id: myId });})
• Surprisingly the rest worked nearly without any further modifications thumbsup

And I gotta say urigo:angular makes a good impression. Thanks for keeping it up to date and healthy!

[Urigo]

@tehXor, you comment makes me so happy!!

Thank you so so much for you help and documentation, it is so great to have you on board with us.

Do you think we should add those steps in some other place or here is enough?

[tehXor]

@Urigo I'm glad you appreciated my comment.
But as I'm not sure for how much people this actually will be of relevance and as Google is very good in finding GitHub threads (this already is #1 for "upgrade ngMeteor" and normally on the first site for similar queries), I guess it's enough to keep it here ;-)

[Urigo]

Cool, again, thank you so much