Meteor: Minimongo does not synchronize with MongoDB

[dolf]

Hello everybody,
my Meteor application using Angular 2 and Typescript seems not to load the server data on the client side: I have followed this tutorial, both with autopublish turned on and of, but each time several tries to display data on client side with different collections failed.

import { Component } from '@angular/core';
import { Mongo } from 'meteor/mongo';
import template from './panel-param-set-selection.component.html';

import { Parties }   from '../../../both/collections/parties.collection';

@Component({
    selector: 'my-selector',
    template
})
export class MyComponent
{
    parties: Mongo.Cursor<any>;

    constructor() {
        this.parties = Parties.find();
        alert(this.parties.count());
    }
}

The alert returns 0. My collection:

import {Mongo} from 'meteor/mongo';
export const Parties = new Mongo.Collection('parties');

Calling “db.parties.find({});” in mongodb returns 3 rows. I use Angular 2 RC5 and my clients’ main.ts looks like following:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Maybe anybody can help.

[hwillson]

Can you show us where you’re referencing/loading your Parties Collection server side? (for example, please post your /server/main.ts) You’ll want to make sure it’s available on both the client and server.

[dolf]

Exactly. Well, I expected that it is available on server side, as my server/main.ts is configured as below:

import {loadParties} from './imports/fixtures/parties';

import { Meteor } from 'meteor/meteor';

Meteor.startup(() => {
  loadParties();
});

This is the way it is setup in the tutorial. The function loadParties is called on startup, and it really works as I can access the rows of the collection in the meteor mongo console. This is what the function looks like:

import { Parties } from '../../../both/collections/parties.collection';
 
export function loadParties() {
  if (Parties.find().count() === 0) {
    const parties = [
      {
        name: 'Dubstep-Free Zone',
        description: 'Can we please just for an evening not listen to dubstep.',
        location: 'Palo Alto',
        public:true
      },
      {
        name: 'All dubstep all the time',
        description: 'Get it on!',
        location: 'Palo Alto',
        public:true
      },
      {
        name: 'Savage lounging',
        description: 'Leisure suit required. And only fiercest manners.',
        location: 'San Francisco',
        public:true
      }
    ];
 
    parties.forEach((party) => Parties.insert(party));
  }
}

Am I right that if I run “meteor add autopublish”, I do not need any “Meteor.publish()” statements? “meteor list” shows autopublish in version 1.0.7. But anyway I have also tried to remove autopublish and to publish and subscribe manually as in the tutorial - same issue, but as a newbie I am not shure if I did everything right.

[dolf]

My project contains the following packages:

meteor-base@1.0.4             # Packages every Meteor app needs to have
mobile-experience@1.0.4       # Packages for a great mobile UX
mongo@1.1.12                   # The database Meteor supports right now
reactive-var@1.0.10            # Reactive variable for tracker
jquery                  # Helpful client-side library
tracker@1.1.0                 # Meteor's client-side reactive programming library

standard-minifier-css@1.2.0   # CSS minifier run for production mode
standard-minifier-js@1.2.0    # JS minifier run for production mode
es5-shim@4.6.14                # ECMAScript 5 compatibility for older browsers.
ecmascript@0.5.8              # Enable ECMAScript2015+ syntax in app code

angular2-compilers
barbatus:angular2-runtime
nemo64:bootstrap
http
autopublish@1.0.7
mrt:jquery-ui
aramk:requirejs

[robfallows]

Have you implemented the dynamic template from the tutorial?

Using an alert in your MyComponent class will almost inevitably show zero, because the data will not have made it from the server by the time that constructor runs.

[dolf]

Hi robfallows,

yes I have tried the template. In the browser is shown up the error message

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

This indicates that either *ngFor was in Angular 2 RC 5 changed in the way, that it can’t handle Mongo Cursors any more, or the Cursor has no content. I will retry some scenarios.

[dolf]

Now I have tried the following:

//...
export class MyComponent
{
    partiesCursor: Mongo.Cursor<any>;
    parties: any[];

    constructor() {
        this.partiesCursor = Parties.find();
        this.parties = this.partiesCursor.fetch();
    }
}

The template:

<div>
  <ul>
	<li *ngFor="let party of parties">
      <a>{{party.name}}</a>
      <p>{{party.description}}</p>
      <p>{{party.location}}</p>
    </li>
  </ul>
</div>

No error message any more, but still no data displayed, just an empty ul tag. This is why I think there are no data received on client side. “db.parties.find({});” on server side still shows 3 rows. Maybe i fetch the cursor in the wrong way?

[hwillson]

In your ./imports/fixtures/parties.js file, can you add a console.log to make sure your Parties Collection is being referenced properly?

import { Parties } from '../../../both/collections/parties.collection';
console.log(Parties);

export function loadParties() {
...

[dolf]

This is the output:

 { _makeNewID: [Function],
   _transform: null,
   _connection:     
    Server {        
      options:      
       { heartbeatInterval: 15000,
         heartbeatTimeout: 15000,
         respondToPings: true },
      onConnectionHook: 
       { nextCallbackId: 0,
         callbacks: {},
         bindEnvironment: true,
         exceptionHandler: 'onConnection callback' },
      publish_handlers: { meteor_autoupdate_clientVersions: [Function] },
      universal_publish_handlers: [ [Function], [Function], [Function], [Function] ],
      method_handlers: 
       { '/parametersets/insert': [Function],
         '/parametersets/update': [Function],
         '/parametersets/remove': [Function],
         '/paramsetcategories/insert': [Function],
         '/paramsetcategories/update': [Function],
         '/paramsetcategories/remove': [Function],
         '/parametersetgroups/insert': [Function],
         '/parametersetgroups/update': [Function],
         '/parametersetgroups/remove': [Function],
         '/parties/insert': [Function],
         '/parties/update': [Function],
         '/parties/remove': [Function],
         testMethod: [Function],
         erpImage: [Function] },
      sessions: {}, 
      stream_server: 
       StreamServer {
         registration_callbacks: [Object],
         open_sockets: [],
         prefix: '/sockjs',
         server: [Object] } },
   _collection:     
    { find: [Function: bound ],
      findOne: [Function: bound ],
      insert: [Function: bound ],
      update: [Function: bound ],
      upsert: [Function: bound ],
      remove: [Function: bound ],
      _ensureIndex: [Function: bound ],
      _dropIndex: [Function: bound ],
      _createCappedCollection: [Function: bound ],
      dropCollection: [Function: bound ],
      rawCollection: [Function: bound ] },
   _name: 'parties',
   _driver:         
    { mongo:        
       MongoConnection {
         _observeMultiplexers: {},
         _onFailoverHook: [Object],
         db: [Object],
         _primary: '127.0.0.1:3001',
         _oplogHandle: [Object],
         _docFetcher: [Object] } },
   _restricted: false,
   _insecure: undefined,
   _validators:     
    { insert: { allow: [], deny: [] },
      update: { allow: [], deny: [] },
      remove: { allow: [], deny: [] },
      upsert: { allow: [], deny: [] },
      fetch: [],    
      fetchAllFields: false },
   _prefix: '/parties/' }

[robfallows]

Can we see your template as well?

[dolf]

Oh yes, I had already posted it, I did not change anything. It seems to be tricky.

Unfortunately I do not get any error messages and I haven’t any further ideas.

[robfallows]

Oops - my bad. I meant your index.html … unless you have a repo we can look at?

[dolf]

Hi robfallows,

I don’t have a public repo and unfortunately I am running out of time evaluating the whole Meteor thing, actually I am using it just for experimental reasons.

I had also tried to redo urigos’ tutorial and after I have successfully connected minimongo to the server, I upgraded my angular packages to RC5 and as I had already suspected, this caused the same issue I had.

Finally I still don’t know, if I get any data on server side or not: I only know that the *ngFor statement is not working with Meteor Cursors from version RC5, and the only solution I found was to fetch() the cursor, but the fetched array seems to contain no data. Maybe I am still doing something wrong publishing and subscribing the data, but I have tried several things and also tried to use urigos’ TODO list sample based on RC5 and to copy parts of it, but each time I was confronted with problems, meaningless error messages and application behaviour, which simply differs from what you expect if you follow exactly a tutorial on the internet.

Maybe it is for me as a Backend Developer just too much to start with this whole technology stack which is completely new for me, but I just find it difficult to get started with meteor in light of the poor documentation and support. For example there is a similar issue on stackoverflow and it seems that nobody can solve this. An another example is how to configure and use RequireJS modules in meteor - simply no useful docs and discussions. I don’t want to offend anybody and correct me if I am wrong, but it is just discouraging to encounter constantly new difficulties which are not satisfactory handled anywhere on the internet.

[robfallows]

Unfortunately, I don’t use angular, but maybe we could try pinging some experts … @Urigo, @Hongbo_Miao … perhaps they can help?

[dolf]

Cool, I wasn’t aware of this pinging functionality It remains to be hoped that one of them can help.

By the way, I like the functions of this forum and in particular its’ reactivity. Let me guess which technology is behind it…

[robfallows]

@dolf

Let me guess which technology is behind it…

If your guess is Meteor … you’d be wrong.

[Hongbo_Miao]

Hi @dolf if you are still having the problem, a repo will help us locate the issue quickly.

[Hongbo_Miao]

Also check https://github.com/Urigo/meteor-angular2.0-socially/archive/step_03.zip
This is the file when step 3 finish. And after running

npm i
meteor

it works well. It may help you.

[Urigo]

Hi everyone and sorry for the late response.
We were hard at work for updating to the latest Angular 2.0 stable.
Please try the new angular2-meteor@0.7.0, angular2-compilers@0.6.2_1 and the latest Angular 2.0.

We’ve update the Socially 2.0 tutorial and the Blaze to Angular 2 migration tutorial for reference - http://www.angular-meteor.com/migration/angular2/intro (Whatsapp clone is on the way)

Sorry for the long wait, it was very hard to keep up with Angular 2 releases in latest months.

If you find issues, please open new ones on the Github repo.