Socially tutorial (Angular2 + Meteor)

Question

URL: http://www.angular-meteor.com/tutorials/socially/angular2/search-sort-pagination-and-reactive-vars

While I am following the tutorial to section 12.4, the compiler always complains: [web.browser] client/parties-list/parties-list.ts (28, 40): Cannot find name 'ReactiveVar

Then, I type "meteor list" in my command line and I have the following:

---

accounts-password                1.1.4  Password support for accounts

anti:fake                        0.4.1  Random text and data generator

barbatus:ng2-meteor-accounts     0.1.6  Meteor Accounts for Angular2

barbatus:ng2-meteor-accounts-ui  0.1.3  Meteor Accounts UI for Angular2

barbatus:ng2-pagination          0.1.3  Angular2 Pagination Components

es5-shim                         4.1.14  Shims and polyfills to improve ECMAScr...

jquery                           1.11.4  Manipulate the DOM using CSS selectors

meteor-base                      1.0.1  Packages that every Meteor app needs

mobile-experience                1.0.1  Packages for a great mobile user experi...

mongo                            1.1.3  Adaptor for using MongoDB and Minimongo...

reactive-var                     1.0.6  Reactive variable

session                          1.1.1  Session variable

standard-minifiers               1.0.2  Standard minifiers used with Meteor app...

tracker                          1.0.9  Dependency tracker to allow reactive ca...

urigo:angular2-meteor            0.4.4  Angular2 and Meteor integration

---

The reactive-var is clearly installed. But why the compiler still complain cannot find 'ReactiveVar'?

Answer 1

Make sure your typings are referenced correctly and are up to date. I am using Meteor 1.2.1 and ionic2-meteor, so I have a typings folder.

Make sure you have typings NPM module installed.

npm install typings -g

And then install the typings for meteor

  typings install meteor --ambient

  typings install es6-promise --ambient

  typings install es6-shim --ambient

Include the main.d.ts file in your tsconfig.json

"typings": [
      "typings/ionic2-meteor/ionic-framework/ionic.d.ts",
      "typings/ionic2-meteor/ionic2-meteor.d.ts",
      "typings/angular2-meteor/angular2-meteor.d.ts",
      "typings/main.d.ts"
    ]

Make sure the meteor.d.ts files installed contain the following:

declare var ReactiveVar: ReactiveVarStatic;
interface ReactiveVarStatic {
    new<T>(initialValue: T, equalsFunc?: Function): ReactiveVar<T>;
}
interface ReactiveVar<T> {
    get(): T;
    set(newValue: T): void;
}

In my case I had to update my meteor.d.ts files (main and browser) because they did not contain the ReactiveVar declaration and interface.