I’m writing a meteor/angular2 app, and I have just upgraded to angular2 rc5. I get an error when I try to show a list of messages based on a mongo cursor in my component. I have tried to distill the code down, please let me know, if you need something more.
Here is the component:
import { Component, OnInit } from '@angular/core';
import { Mongo } from 'meteor/mongo';
import template from './messages-list.component.html';
@Component({
selector: 'messages-list',
template
})
export class MessagesListComponent implements OnInit {
messages: Mongo.Cursor<string>;
collection: Mongo.Collection<string>
ngOnInit() {
// just create an empty local collection for brevity, but it also fails with a named client/server collections
this.collection = new Mongo.Collection<string>(null);
this.messages = this.collection.find();
}
}
And this is the html template:
<ul>
<li *ngFor="let message of messages">
{{message}}
</li>
</ul>
This fails with a long stacktrace when I try to view the page, and several nested errors. I have pasted the entire browser console output here, but I think this seems to be the root of it:
Unhandled Promise rejection: (7)
"EXCEPTION: Error in ./MessagesListComponent class MessagesListComponent - inline template:0:10
ORIGINAL EXCEPTION: TypeError: undefined is not an object (evaluating ‘async_1.ObservableWrapper.subscribe’)
I can make the code work again by either changing the view or the component code as follows:
View:
<ul>
<!-- avoid iterating over messages -->
<!--li *ngFor="let message of messages">
{{message}}
</li-->
</ul>
Code:
// use a normal array instead of a cursor
export class MessagesListComponent implements OnInit {
messages: string[]
ngOnInit() {
this.messages = []
}
}
Here are the dependencies of my package.json:
“dependencies”: {
"@angular/common": “2.0.0-rc.5”,
"@angular/compiler": “2.0.0-rc.5”,
"@angular/core": “2.0.0-rc.5”,
"@angular/forms": “0.3.0”,
"@angular/platform-browser": “2.0.0-rc.5”,
"@angular/platform-browser-dynamic": “2.0.0-rc.5”,
"@angular/router": “3.0.0-rc.1”,
“angular2-meteor”: “0.6.2”,
“angular2-meteor-auto-bootstrap”: “0.6.0”,
“angular2-meteor-polyfills”: “0.1.1”,
“angular2-meteor-tests-polyfills”: “0.0.2”,
“es6-shim”: “0.35.1”,
“material-design-lite”: “^1.2.0”,
“meteor-node-stubs”: “0.2.3”,
“reflect-metadata”: “0.1.3”,
“rxjs”: “5.0.0-beta.6”,
“zone.js”: “0.6.12”
}
Does anyone have an idea how to solve this?