The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Ionic 2 and Meteor

Uri Goldshtein is a software developer at Meteor Development Group and frequently writes about Ionic on Meteor’s blog.

A little over a year ago, I released the WhatsApp clone tutorial with Angular, Ionic, and Meteor.

A year has passed, and a lot has happened—Angular 2.0 became stable, Ionic 2.0 entered its RC stage, and Meteor just released 1.4.2 with many improvements (fast build times, full npm and yarn support, Node 4.6.1 and MongoDB 3 by default, GraphQL, and more Databases supported with Apollo).

We’ve been hard at work on a complete integration of Angular 2.0, Meteor, and Ionic.

Each platform has its own CLI and build process solutions, so we made it possible for you to choose your favorite.

Today, I’m happy to announce that we are releasing two new versions of the Ionic/Meteor WhatsApp tutorial, this time with Angular 2.0 and Ionic 2.0, one using the Ionic CLI and one using the Meteor CLI.

Check them out here.

In these tutorials, we’ll create a full WhatsApp clone using Angular 2 and Ionic 2. We’ll use Meteor’s real-time collections for the chat and Meteor’s simple Authentication packages for SMS-based authentication.

It’s great to see the power of these two solutions working together, keeping the platforms up-to-date with the latest improvements in the JavaScript ecosystem!

  • Aofzide Csiperos

    ionic 2.1.13 error when I run ‘ionic serve’ with any starter project. Look like problem same as this link. http://stackoverflow.com/questions/40855210/serve-error-with-ionic-conference-app

  • KingOfMyRoom

    It’s a great example. The tutorial is very helpful as it gives some good implementation practices.

    I’ve tried to run the whole code from the last summary section but it’s not working. Both npm install and meteor npm install are producing errors:

    meteor npm install
    UNMET PEER DEPENDENCY rxjs@5.0.0-beta.12
    UNMET PEER DEPENDENCY babel-runtime@^6.18.0
    UNMET PEER DEPENDENCY meteor-client-side@1.3.5
    UNMET PEER DEPENDENCY rxjs@5.0.0-rc.2
    UNMET PEER DEPENDENCY zone.js@0.6.26

    npm install
    npm ERR! peerinvalid The package rxjs@5.0.0-rc.2 does not satisfy its siblings’ peerDependencies requirements!

    • KingOfMyRoom

      Instead of downloading the code from the site. I used the code from github. This has lowered the number of errors but it’s was not working.

      meteor npm install
      UNMET PEER DEPENDENCY babel-runtime@^6.18.0
      UNMET PEER DEPENDENCY meteor-client-side@1.3.5

      ————————————————————————————–

      I was able to get rid of the errors by doing this:
      npm install meteor-client-side@0.2.3 –save
      npm install babel-runtime@6.18.0 –save
      meteor npm install –save meteor-rxjs

      And to run the application, it needs 2 steps
      1) Launch meteor with `meteor` command in api folder
      2) Launch ionic from project root: `ionic serve`

      Hope this helps.

      • Dotan Simha

        Hi @KingOfMyRoom:disqus , I guess that you use old version of Node, which behaves differently with peer-dependencies.
        Please try to update you Node to version>=5, remove node_modules and then try again to `npm install`.

        • KingOfMyRoom

          Hi @DotanSimha,

          Thanks for your reply.

          I have upgraded to the latest LTS node version (6.9) and git clone the project again but getting the same results. I had to install the missing packages individually. And when I launch the server from the api folder with the `meteor` command, I get this message:

          collections/whatsapp-collections.ts (3, 14): Cannot find name ‘Package’.
          server/methods.ts (1, 24): Cannot find module ‘meteor/meteor’.
          server/methods.ts (3, 30): Cannot find module ‘meteor/check’.
          server/publications.ts (1, 24): Cannot find module ‘meteor/meteor’.
          server/publications.ts (2, 23): Cannot find module ‘meteor/mongo’.
          server/main.ts (1, 24): Cannot find module ‘meteor/meteor’.
          server/main.ts (4, 26): Cannot find module ‘meteor/accounts-base’.

          I have tried to add them manually from the api folder with these commands:
          meteor add check
          meteor add accounts-base

          But this has no effect. I don’t know how to solve this.

  • http://www.paleoislife.com/ justageek

    Hi, is it possible to do this project using Angular 1.5x? I have not yet become proficient with Typescript, and I’d like to use some of these concepts with Angular 1.5

  • Davidarius

    Hello, I`m following the post and I don’t found a explanation of how to deploy an ionic 2 + meteor app. There some tutorial? How deploy meteor and set/point the server on ionic 2 app?

    • http://angular-meteor.com/ Urigo

      There are many ways to deploy and it depends on if you chose to use the Ionic CLI or the Meteor CLI.
      If you are using the Meteor CLI, you can deploy Meteor as any regular Node app, here is a guide for it – https://guide.meteor.com/deployment.html

      • Davidarius

        Meteor isolated is ok, ionic isolated is ok too, but this two guys together let me confusing. I tried using ionic cli, I tried run the app on device but ionic don’t find meteor api, there is some place to configure an url to point do meteor? Is automatic this kind of associate between meteor and ionic? If you has some tutorial to give me some light will be helpfull.

        Thanks

        • Ivan

          Hi Davidarius. I have similar problem. Did you had any success meanwhile?
          Thanks

  • http://gian.xyz Gianfranco Palumbo

    any screenshots?

  • Chocka K

    I think most of the business people are using this application for team
    communication as will as to mange the client meeting… its right ? Some
    more business chat application are there like ( Hipchat, Officechat,
    Slack, Engagedots ) –

    check out this application – http://www.engagedots.com