urigo / ionic2-meteorcli-whatsapp

WhatsApp Clone tutorial with Ionic 2.0 and Meteor CLI

How to build a Whatsapp-clone using Ionic 2 and Meteor CLI

Facing your next mobile app project, you want to choose the best solutions to start fast while also solutions that will stay relevant when your project grows and scales.

The two companies that took the concept of creating a platform with a complete set of tools for your development needs and not just another framework to the furthest are Meteor and Ionic.

Ionic - Ionic has become one of the most popular solutions to develop hybrid mobile apps fast across different platform.

The Ionic platform includes solutions for prototyping, build, testing, deploying apps, a market of starter apps, plugins and themes, CLI integration and push notifications service. (Further writing by an Ionic person)

Meteor - But your app needs a full stack solution.

Meteor has become the only open source JavaScript platform that supply the complete set of solutions you need to create a real time mobile connected apps.

The Meteor platform is reliable, fast and easy to develop and deploy and it will also handle all the complexities of your app when it grows and scales with time.

So which one should you choose?

Your best option is to use them both!

Both companies made the steps needed to support each other:

• Meteor now has official support for Angular with it's 3rd party libraries!
• Ionic added official support for Meteor's packaging system

So now we can use the strengthnesses of each of those platform combined to create the ultimate stack for your mobile apps.

In this tutorial, we will create a full WhatsApp clone using Angular and Ionic framework as a client platform and Meteor's reactive collections and authentication packages as our back-end.

Chapters

• Step 1 - Bootstrapping
• Step 2 - Chats Page
• Step 3 - RxJS
• Step 4 - Realtime Meteor Server
• Step 5 - Folder Structure
• Step 6 - Messages Page
• Step 7 - Users & Authentication
• Step 8 - Chats Creation & Removal
• Step 9 - Privacy & Subscriptions
• Step 10 - Filter & Pagination
• Step 11 - Google Maps & Geolocation
• Step 12 - File Upload & Images
• Step 13 - Native Mobile

[{]: (nav_step ref="https://angular-meteor.com/tutorials/whatsapp2/ionic/1.0.0/setup")

Begin Tutorial >
[}]: #

ionic2-meteorcli-whatsapp's Issues

CPU usage 100% (only in production)

Hi guys.

I have a problem with CPU usage, it always 100%.

I clone the repository, switch to step5, run with meteor, it works well. But when I try to make it run in production, by build the deployment bundle and run with node main.js, the CPU usage reach 9x-100%.

Is there any solution?

Thank you.

In your official tutorial page, all the download link is unavalable

In your official tutorial page, all the download link is unavalable.

As in page https://angular-meteor.com/tutorials/whatsapp2/ionic/messages-page, when I click the link below, I got an 404 error

Failed to install accounts-phone at step 5

▶ meteor add mys:accounts-phone
=> Errors while adding packages:

While loading package [email protected]_2:
error: Command failed:
/Users/zhouhao/.meteor/packages/meteor-tool/.1.4.1_1.1kl8jdk++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/bin/npm
rebuild --no-bin-links --update-binary
../src/bcrypt_node.cc:54:18: error: no member named 'Dispose' in
'v8::Persistent<v8::Function, v8::NonCopyablePersistentTraitsv8::Function

'
callback.Dispose();

../src/bcrypt_node.cc:128:19: error: unknown type name 'uv_work_t'
void GenSaltAsync(uv_work_t* req) {
^
../src/bcrypt_node.cc:137:24: error: unknown type name 'uv_work_t'
void GenSaltAsyncAfter(uv_work_t* req) {
^
../src/bcrypt_node.cc:138:17: error: calling a protected constructor of class
'v8::HandleScope'
HandleScope scope;
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:885:13: note: declared
protected here
V8_INLINE HandleScope() {}
^
../src/bcrypt_node.cc:146:44: error: no member named 'New' in
'v8::String'
argv[0] =
Exception::Error(String::New(baton->error.c_str()));
~~~~~~~~^
../src/bcrypt_node.cc:147:19: error: no matching function for call to
'Undefined'
argv[1] = Undefined();
^~~~~~~~~
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:315:27: note: candidate
function not viable: requires single argument 'isolate', but no arguments were
provided
friend Local<Primitive> Undefined(Isolate* isolate);
^
../src/bcrypt_node.cc:150:19: error: no matching function for call to
'Undefined'
argv[0] = Undefined();
^~~~~~~~~
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:315:27: note: candidate
function not viable: requires single argument 'isolate', but no arguments were
provided
friend Local<Primitive> Undefined(Isolate* isolate);
^
../src/bcrypt_node.cc:151:19: warning: 'Encode' is deprecated: Use
Encode(isolate, ...) [-Wdeprecated-declarations]
argv[1] = Encode(baton->salt.c_str(), baton->salt.size(),
BINARY);
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/node.h:300:45: note: 'Encode' has
been explicitly marked deprecated here
inline v8::Local<v8::Value> Encode(
^
../src/bcrypt_node.cc:156:20: error: member reference type
'v8::Persistent<v8::Function>' is not a pointer; did you mean to use '.'?
baton->callback->Call(Context::GetCurrent()->Global(), 2, argv);
~~~~~~~~~~~~~~~^~
.
../src/bcrypt_node.cc:156:22: error: no member named 'Call' in
'v8::Persistent<v8::Function, v8::NonCopyablePersistentTraits<v8::Function>
'
baton->callback->Call(Context::GetCurrent()->Global(), 2, argv);
~~~~~~~~~~~~~~~  ^
../src/bcrypt_node.cc:156:36: error: no member named 'GetCurrent' in
'v8::Context'
baton->callback->Call(Context::GetCurrent()->Global(), 2,
argv);
~~~~~~~~~^
../src/bcrypt_node.cc:159:9: warning: 'FatalException' is deprecated: Use
FatalException(isolate, ...) [-Wdeprecated-declarations]
FatalException(try_catch);
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/node.h:284:29: note:
'FatalException' has been explicitly marked deprecated here
inline void FatalException(const v8::TryCatch& try_catch)
{
^
../src/bcrypt_node.cc:164:34: error: unknown type name 'Arguments'; did you
mean 'v8::internal::Arguments'?
Handle<Value> GenerateSalt(const Arguments &args)
{
^~~~~~~~~
v8::internal::Arguments
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:139:7: note:
'v8::internal::Arguments' declared here
class Arguments;
^
../src/bcrypt_node.cc:165:17: error: calling a protected constructor of class
'v8::HandleScope'
HandleScope scope;
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:885:13: note: declared
protected here
V8_INLINE HandleScope() {}
^
../src/bcrypt_node.cc:167:13: error: member access into incomplete type 'const
v8::internal::Arguments'
if (args.Length() < 3) {
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:139:7: note: forward
declaration of 'v8::internal::Arguments'
class Arguments;
^
../src/bcrypt_node.cc:168:60: error: no member named 'New' in
'v8::String'
return ThrowException(Exception::TypeError(String::New("3 arguments
expected")));
~~~~~~~~^
../src/bcrypt_node.cc:171:34: error: type 'const v8::internal::Arguments' does
not provide a subscript operator
if (!Buffer::HasInstance(args[1]) || Buffer::Length(args[1].As<Object>()) !=
16) {
~~~~^~
../src/bcrypt_node.cc:171:61: error: type 'const v8::internal::Arguments' does
not provide a subscript operator
if (!Buffer::HasInstance(args[1]) || Buffer::Length(args[1].As<Object>()) !=
16) {
~~~~^~
../src/bcrypt_node.cc:171:68: error: 'Object' does not refer to a value
if (!Buffer::HasInstance(args[1]) || Buffer::Length(args[1].As<Object>()) !=
16) {
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:2587:17: note: declared here
class V8_EXPORT Object : public Value {
^
../src/bcrypt_node.cc:171:76: error: expected expression
if (!Buffer::HasInstance(args[1]) || Buffer::Length(args[1].As<Object>()) !=
16)
{
^
../src/bcrypt_node.cc:172:60: error: no member named 'New' in
'v8::String'
return ThrowException(Exception::TypeError(String::New("Second argument must be
a 16 byte Buffer")));
~~~~~~~~^
fatal error: too many errors emitted, stopping now [-ferror-limit=]
2 warnings and 20 errors generated.
make: *** [Release/obj.target/bcrypt_lib/src/bcrypt_node.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit
(/Users/zhouhao/.meteor/packages/meteor-tool/.1.4.1_1.1kl8jdk++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:87:13)
gyp ERR! stack     at ChildProcess.emit (events.js:172:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit
(internal/child_process.js:200:12)
gyp ERR! System Darwin 15.6.0
gyp ERR! command
"/Users/zhouhao/.meteor/packages/meteor-tool/.1.4.1_1.1kl8jdk++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/bin/node"
"/Users/zhouhao/.meteor/packages/meteor-tool/.1.4.1_1.1kl8jdk++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js"
"rebuild"
gyp ERR! cwd
/Users/zhouhao/.meteor/packages/npm-bcrypt/.0.7.8_2.1gsdx9e++os.osx.x86_64+web.browser+web.cordova/npm/node_modules/.temp-xj676f/node_modules/bcrypt
gyp ERR! node -v v4.5.0
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok 

npm ERR! Darwin 15.6.0
npm ERR! argv
"/Users/zhouhao/.meteor/packages/meteor-tool/.1.4.1_1.1kl8jdk++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/bin/node"
"/Users/zhouhao/.meteor/packages/meteor-tool/.1.4.1_1.1kl8jdk++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/bin/npm"
"rebuild" "--no-bin-links" "--update-binary"
npm ERR! node v4.5.0
npm ERR! npm v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the bcrypt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-gyp rebuild
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs bcrypt
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls bcrypt
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!
/Users/zhouhao/.meteor/packages/npm-bcrypt/.0.7.8_2.1gsdx9e++os.osx.x86_64+web.browser+web.cordova/npm/node_modules/.temp-xj676f/npm-debug.log
../src/bcrypt_node.cc:54:18: error: no member named 'Dispose' in
'v8::Persistent<v8::Function, v8::NonCopyablePersistentTraitsv8::Function

'
callback.Dispose();

../src/bcrypt_node.cc:128:19: error: unknown type name 'uv_work_t'
void GenSaltAsync(uv_work_t* req) {
^
../src/bcrypt_node.cc:137:24: error: unknown type name 'uv_work_t'
void GenSaltAsyncAfter(uv_work_t* req) {
^
../src/bcrypt_node.cc:138:17: error: calling a protected constructor of class
'v8::HandleScope'
HandleScope scope;
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:885:13: note: declared
protected here
V8_INLINE HandleScope() {}
^
../src/bcrypt_node.cc:146:44: error: no member named 'New' in
'v8::String'
argv[0] =
Exception::Error(String::New(baton->error.c_str()));
~~~~~~~~^
../src/bcrypt_node.cc:147:19: error: no matching function for call to
'Undefined'
argv[1] = Undefined();
^~~~~~~~~
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:315:27: note: candidate
function not viable: requires single argument 'isolate', but no arguments were
provided
friend Local<Primitive> Undefined(Isolate* isolate);
^
../src/bcrypt_node.cc:150:19: error: no matching function for call to
'Undefined'
argv[0] = Undefined();
^~~~~~~~~
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:315:27: note: candidate
function not viable: requires single argument 'isolate', but no arguments were
provided
friend Local<Primitive> Undefined(Isolate* isolate);
^
../src/bcrypt_node.cc:151:19: warning: 'Encode' is deprecated: Use
Encode(isolate, ...) [-Wdeprecated-declarations]
argv[1] = Encode(baton->salt.c_str(), baton->salt.size(),
BINARY);
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/node.h:300:45: note: 'Encode' has
been explicitly marked deprecated here
inline v8::Local<v8::Value> Encode(
^
../src/bcrypt_node.cc:156:20: error: member reference type
'v8::Persistent<v8::Function>' is not a pointer; did you mean to use '.'?
baton->callback->Call(Context::GetCurrent()->Global(), 2, argv);
~~~~~~~~~~~~~~~^~
.
../src/bcrypt_node.cc:156:22: error: no member named 'Call' in
'v8::Persistent<v8::Function, v8::NonCopyablePersistentTraits<v8::Function>
'
baton->callback->Call(Context::GetCurrent()->Global(), 2, argv);
~~~~~~~~~~~~~~~  ^
../src/bcrypt_node.cc:156:36: error: no member named 'GetCurrent' in
'v8::Context'
baton->callback->Call(Context::GetCurrent()->Global(), 2,
argv);
~~~~~~~~~^
../src/bcrypt_node.cc:159:9: warning: 'FatalException' is deprecated: Use
FatalException(isolate, ...) [-Wdeprecated-declarations]
FatalException(try_catch);
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/node.h:284:29: note:
'FatalException' has been explicitly marked deprecated here
inline void FatalException(const v8::TryCatch& try_catch)
{
^
../src/bcrypt_node.cc:164:34: error: unknown type name 'Arguments'; did you
mean 'v8::internal::Arguments'?
Handle<Value> GenerateSalt(const Arguments &args)
{
^~~~~~~~~
v8::internal::Arguments
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:139:7: note:
'v8::internal::Arguments' declared here
class Arguments;
^
../src/bcrypt_node.cc:165:17: error: calling a protected constructor of class
'v8::HandleScope'
HandleScope scope;
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:885:13: note: declared
protected here
V8_INLINE HandleScope() {}
^
../src/bcrypt_node.cc:167:13: error: member access into incomplete type 'const
v8::internal::Arguments'
if (args.Length() < 3) {
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:139:7: note: forward
declaration of 'v8::internal::Arguments'
class Arguments;
^
../src/bcrypt_node.cc:168:60: error: no member named 'New' in
'v8::String'
return ThrowException(Exception::TypeError(String::New("3 arguments
expected")));
~~~~~~~~^
../src/bcrypt_node.cc:171:34: error: type 'const v8::internal::Arguments' does
not provide a subscript operator
if (!Buffer::HasInstance(args[1]) || Buffer::Length(args[1].As<Object>()) !=
16) {
~~~~^~
../src/bcrypt_node.cc:171:61: error: type 'const v8::internal::Arguments' does
not provide a subscript operator
if (!Buffer::HasInstance(args[1]) || Buffer::Length(args[1].As<Object>()) !=
16) {
~~~~^~
../src/bcrypt_node.cc:171:68: error: 'Object' does not refer to a value
if (!Buffer::HasInstance(args[1]) || Buffer::Length(args[1].As<Object>()) !=
16) {
^
/Users/zhouhao/.node-gyp/4.5.0/include/node/v8.h:2587:17: note: declared here
class V8_EXPORT Object : public Value {
^
../src/bcrypt_node.cc:171:76: error: expected expression
if (!Buffer::HasInstance(args[1]) || Buffer::Length(args[1].As<Object>()) !=
16)
{
^
../src/bcrypt_node.cc:172:60: error: no member named 'New' in
'v8::String'
return ThrowException(Exception::TypeError(String::New("Second argument must be
a 16 byte Buffer")));
~~~~~~~~^
fatal error: too many errors emitted, stopping now [-ferror-limit=]
2 warnings and 20 errors generated.
make: *** [Release/obj.target/bcrypt_lib/src/bcrypt_node.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit
(/Users/zhouhao/.meteor/packages/meteor-tool/.1.4.1_1.1kl8jdk++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:87:13)
gyp ERR! stack     at ChildProcess.emit (events.js:172:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit
(internal/child_process.js:200:12)
gyp ERR! System Darwin 15.6.0
gyp ERR! command
"/Users/zhouhao/.meteor/packages/meteor-tool/.1.4.1_1.1kl8jdk++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/bin/node"
"/Users/zhouhao/.meteor/packages/meteor-tool/.1.4.1_1.1kl8jdk++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js"
"rebuild"
gyp ERR! cwd
/Users/zhouhao/.meteor/packages/npm-bcrypt/.0.7.8_2.1gsdx9e++os.osx.x86_64+web.browser+web.cordova/npm/node_modules/.temp-xj676f/node_modules/bcrypt
gyp ERR! node -v v4.5.0
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok 

npm ERR! Darwin 15.6.0
npm ERR! argv
"/Users/zhouhao/.meteor/packages/meteor-tool/.1.4.1_1.1kl8jdk++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/bin/node"
"/Users/zhouhao/.meteor/packages/meteor-tool/.1.4.1_1.1kl8jdk++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/bin/npm"
"rebuild" "--no-bin-links" "--update-binary"
npm ERR! node v4.5.0
npm ERR! npm v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the bcrypt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-gyp rebuild
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs bcrypt
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls bcrypt
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!
/Users/zhouhao/.meteor/packages/npm-bcrypt/.0.7.8_2.1gsdx9e++os.osx.x86_64+web.browser+web.cordova/npm/node_modules/.temp-xj676f/npm-debug.log

"No provider for ApplicationInitStatus"

I had a lot of problems with versions due to ionic-angulars rigid version dependencies (4.0.1 did not meet the required 4.0.0) so I'm not exactly sure where this should be introduced. Possibly at the end of the basic setup since thats where there is some talk about browsers.

But when I had added the Chats page and was expecting to see something working in my browser this run time error popped up.

After some googling it seems like the BrowserModule need to be added to app.module.ts:

import { BrowserModule } from '@angular/platform-browser';

and

imports: [
    IonicModule.forRoot(MyApp),
    BrowserModule
],

And this fixed it for me.

Errors in step 5

I'm getting the following error on step 5

server/imports/api/sms.ts (6, 26): Property '_options' does not exist on type 'typeof Accounts'.
server/imports/api/sms.ts (7, 3): Cannot find name 'SMS'.

Should we not have to import SMS from the mys:accounts-phone package into the sms.ts file?
If I do

import {SMS} from "meteor/mys:accounts-phone"

I get a module not found error.
Sorry if this is a basic question

Typescript error in Step 2

Hi I'm getting the following error:

=> Client modified -- refreshingclient/imports/pages/chats/chats.component.ts (27, 18): Supplied parameters do not match any signature of call target.
=> Client modified -- refreshing (x2)client/imports/pages/chats/chats.component.ts (27, 18): Supplied parameters do not match any signature of call target.

which refers to the section of code in chats.component.ts :

ngOnInit() {
    this.chats = Chats
      .find({})
      .mergeMap<Chat[]>(chats =>
        Observable.combineLatest(
           ...chats.map(chat =>

            Messages.find({ chatId: chat._id }, { sort: { createdAt: -1 }, limit: 1 })
              .startWith(null)
              .map(messages => {
                if (messages) chat.lastMessage = messages[0];
                return chat;
              })

          )
        )
      ).zone();
  }

What should I do to fix it?

Update to latest Angular and Ionic Versions

I am not able to use this setup with the latest Ionic native plugins.
Getting the following error 'SyntaxError: import declarations may only appear at top level of a module'.
Will this tutorial be updated anytime in the near future with the latest libraries?

Unable to start the daemon process - meteor run android-device

Excuse me, I don´t know if is the correct place to request help to solve an error, I am trying to follow the tutorial but I have a trouble when I tried to run the app in a mobile, a part of a log is below.

D:\Meteor\whatsapp>meteor run android-device
[[[[[ ~\D\Meteor\whatsapp ]]]]]
=> Started proxy.
=> Started MongoDB.

WARNING: You are testing your app on a remote device. For the mobile app to be able to connect to the local server, make sure your device is on the same network, and that the network configuration allows clients to talk to each other (no client isolation).
=> Started your app.
=> App running at: http://localhost:3000/
Type Control-C twice to stop.
=> Errors executing Cordova commands:

While running Cordova app for platform Android with options --device:
Error: Command failed: D:\Meteor\whatsapp.meteor\local\cordova-build\platforms\android\cordova\run --device
--device
FAILURE: Build failed with an exception.

• What went wrong:
  Unable to start the daemon process.
  This problem might be caused by incorrect configuration of the daemon.
  For example, an unrecognized jvm option is used.
  Please refer to the user guide chapter on the daemon at
  https://docs.gradle.org/2.14.1/userguide/gradle_daemon.html
  Please read the following process output to find out more:

---

Error occurred during initialization of VM
Could not reserve enough space for 2097152KB object heap

I need help to solve that error, I tried to search information about it but I cant solve it, I tried to set a enviroment variable GRADLE_OPTS to increase memory heap but it doesn´t help.

App loading time on iOS / Android builds startup

Hi my app has a very long loading time on app startup once it is built for iOS or Android. It is based on this projects structure, but connects to a remote server instead of having both server and client code in the same app.

loading time is not good on web too but still ok.

Any idea where it could come from ?

Code correction suggestion : chats.components.ts

there is this peace of code in the tutorial (step 3) :
ngOnInit() { this.chats = Chats .find({}) .mergeMap((chats: Chat[]) => Observable.combineLatest( ...chats.map((chat: Chat) => Messages .find({chatId: chat._id}) .startWith(null) .map(messages => { if (messages) chat.lastMessage = messages[0]; return chat; }) ) ) ).zone(); }

I solved some erros in my code adding this minor details :
ngOnInit() { this.chats = Chats .find({}) .mergeMap((chats: Chat[]) => { return Observable.combineLatest( ...chats.map((chat: Chat) => Messages .find({chatId: chat._id}) .startWith(null) .map(messages => { if (messages) chat.lastMessage = messages[0]; return chat; }) ) )} ).zone(); }

infact just add a return on the Observable.combineLatest(...)

button clicks on iOS

When build my app for iOS I encounter click problems, i need "sometimes" (its doesn't seem to be conditioned by a type of ionic 2 component) to click several times on a button to have the click detected. sometimes long press even activates the copy paste ios features on the button text

I wonder if any one knows the difference between Ionic 2 iOS compilator and Meteor iOS compilator because I have another iOS 10 app on Ionic 2 latest rc without Meteor which doesn't have this click problem ?

SMS is not defined

Hi @dotansimha , after step 5.16 when I try to run the app, its giving me this error

W20161104-12:58:26.212(-4)? (STDERR) ReferenceError: SMS is not defined
W20161104-12:58:26.212(-4)? (STDERR)     at meteorInstall.server.imports.api.sms.js (server/imports/api/sms.ts:7:3)

Even after adding the typings as it says right before step 5.3

typings install dt~meteor-accounts-phone --save --global

How to run as iOS?

meteor run

uses the Android theme by default when I load the app in the browser. How do I tell it to use the iOS theme without using Cordova and running meteor run ios?

Tutorial update

Some issues to resolve before the Tutorial update:

• App bootstrapping currently happens in Tracker.autorun
  (due to the logging-in check). Setting root component
  in the AppComponent (like here) is more appropriate since
  Meteor can log-out by itself (due to various reasons) but this case is not handled currently
• Sometimes not all uses (that should be shown) to start chat with are shown on the new chat page
• Remove clumsiness of some RxJS expressions in the app like this one (potentially as described in this doc)
• Get rid of enclosing RxJS expressions into MeteorObservable.autorun or MeteorObservable.subscribe which is not really needed - thus might confuse users

Strange bug just to let you know : Some pages reload the whole App

I'm transfering another project from the ionic2 whatsapp (based on a ionic2 starter)
to this project (based on a meteor starter).

when I play with the whatsapp app everything works fine.

I use a trick with DDP so that the server of the app is not built in the app (Checked Accounts and Subscription worked like before without using Meteor rx-js for now, even if I think you've done something cool here I keep it for later).

The problem is that some Pages (of my project), when I try to open them, just relaunch the whole app without triggering errors and I really can't find the code difference between a page that works and a page that fails.

At least it doesn't come from the templates.
Doesn't come from the ngModule.
May come from the component class but I've tryed many variations.

I you have any I idea it would be cool.

Not having luck on following the tutorial

I followed the tutorial up to the end of chat page (step 2) and I realize I'm still getting a blank page. Seems like the tabs' opacity is set to 0 and wasn't able to declare itself to be ready. Not sure where I'm doing wrong, is there a global npm package I should already have in advance?

New to Meteor. Tutorial full of errors.

Hi,

I loved the effort you guys put into this tutorial. However, it is riddled with errors. I have tried following through but am having to extensively use Stack Overflow to fix the errors in the project. Maybe I did not install something that was necessary. I had Meteor and Node installed on my computer. I followed the instructions from the Meteor CLI. Any advice?

Should angular2-compiler be replaced by angular-compiler?

https://angular-meteor.com/tutorials/whatsapp2/meteor/setup

In the Bootstrapping section of the above page, the tutorial calls for the user to install angular2-compiler. Should this not be angular-compiler?

meteor add angular2-compilers

On windows I get the following error when trying to install angular2-compiler:

Cannot download "https://github.com/sass/node-sass/releases/download/v3.8.0/win32-x64-57_binding.node"

Step 6: Users not showing up 'New Chat' modal

Hi,

I have followed tutorial right through, however have noticed that the user list is not showing when the 'New Chat' modal is initiated.

I have checked the subscription and note that am subscribed to Users document. I have also tried copy the files direct from the github repository, to confirm that I was not missing something important, and have the same issue.

Among a few seeming non-related typescript errors, there is this error in the console:

server/imports/publications/chats.publication.ts (10, 8): Property 'publishComposite' does not exist on type 'typeof Meteor'.
server/imports/publications/chats.publication.ts (10, 46): Cannot find name 'PublishCompositeConfig'.
server/imports/publications/chats.publication.ts (19, 8): Cannot find name 'PublishCompositeConfig1'.
server/imports/publications/chats.publication.ts (27, 8): Cannot find name 'PublishCompositeConfig1'.

Other than that, I can nothing wrong with the code, as per the tutorial.

thank you.

Unable to build with --prod --release

Hi!

I was unable to build with ionic cli "--prod --release" parameters.

I got an error:

Module not found: Error: Can't resolve 'meteor/meteor'

Ionic serve works ok, as well if I build in dev. mode.

My configuration:

global packages:

@ionic/cli-utils : 1.5.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 2.0.2
@ionic/cli-plugin-cordova       : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms               : android 6.2.3 ios 4.4.0
Ionic Framework                 : ionic-angular 3.5.2

System:

Node       : v6.11.1
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : not installed
npm        : 3.10.10 

Tutorial to be more explicit about when something is supposed to be working

I run meteor continuously as I walk through the tutorial, but it is not clear to me when I should expect to see something working.

It would be very helpful if the tutorial said something along the lines of "at this point you should see/be able to..." at points where such a landmark is reached.

Please, How i can delete verification page "use only login page"

Update tutorial for Ionic 2 RC / Angular 2 Final

First of all, huge thanks for these great tutorials. It really helps getting hang of things quicker by studying these amazing lessons.

Since Ionic 2 reached RC1 and it's API is pretty much close to final at the moment, do you plan on updating whatsapp tutorial from the Ionic CLI perspective? I have developed an app using ionic 2 beta with angular 2 RC4 for the mobile version which connects to remote meteor server that has it's own angular 2 client for the website part of it, but since then Ionic has had some serious changes along with angular 2 itself and an updated version of this tutorial for Ionic CLI would really help to make the upgrade process smoother.

Again, thanks a lot for your great work, it is really appreciated.

[email protected] requires a peer of @angular/[email protected] but none was installed

Hi having unmet dependencies after cloning the repo at step 1 and running

meteor npm install 

or the when installing ionic according to step 1 in the tutorial

npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of babel-runtime@^6.18.0 but none was installed.

ran a meteor update --all-packages but still getting the npm warnings.
Running meteor 1.4.2.3

Tutorial unclear or out of date

I've tried several times to get this tutorial to work, i'm new to angular2 and meteor but would love to use it for my latest project, i can get this to build for the browser but nothing appears, the build fails for ios, and I have a mile long list of errors in the web console when it does run, all of the other tutorials on the meteor website I was able to get to work, if anyone could help me it would be greatly appreciated.

Error in step 6

This style requires us to add some assets. So inside the public/assets dir, download the following:

public/assets$ wget https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp/raw/master/public/assets/chat-background.jpg
public/assets$ wget https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp/raw/master/public/assets/message-mine.png
public/assets$ wget https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp/raw/master/public/assets/message-other.png

Correct URL (as of March 17, 2017):

wget https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp/raw/master/src/assets/chat-background.jpg
wget https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp/raw/master/src/assets/message-mine.png
wget https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp/raw/master/src/assets/message-other.png

Step 1: Bootstrapping - scss compile error

Errors prevented startup:

While processing files with angular2-compilers (for target web.browser):
/client/main.scss: Scss compiler error: File to import: {}/node_modules/ionic-angular/components/typography/typography not found in file: components

I'm receiving the error above when running meteor after completing all the steps in Bootstrapping.

I have verified that the files do indeed exist in the node_module folders, and also verified to ensure there are no typos. After commenting out the following code, the app was able to fully compile with no errors.

// @import // '{}/node_modules/ionic-angular/components/typography/typography', // '{}/node_modules/ionic-angular/components/typography/typography.ios', // '{}/node_modules/ionic-angular/components/typography/typography.md', // '{}/node_modules/ionic-angular/components/typography/typography.wp';

Also the last step instructs to use "meteor starto" or npm start. It should say meteor run or just meteor since meteor start is depreciated. It might help out some new Meteor devs.

Thanks!

Unable to correct code from tutorial, suggestions for step 1

When clicking on 'Improve this code' on the tutorial setup, I see markdown code which is not identical to the content of the page. Because of this I was not able to create a pull request for the corrections I had to make to get Step 1 running.

So I write down the changes in code I had to make to come through step 1 at this place:

in 1.10:
remove line 222 (typography.scss does not exist in the nodes_module)

in 1.12:
add .woff2-mapping for all roboto-... fonts

in 1.13:
add import { BrowserModule } from '@angular/platform-browser';
and change imports to:

  imports: [
    IonicModule.forRoot(MyApp),
    BrowserModule
  ],

Ionic angular typography error

I have followed the step 1 tutorial but got this error

/client/main.scss: Scss compiler error: File to import: {}/node_modules/ionic-angular/components/typography/typography not found in file: components

How to run in device or simulator?

Normally we can run ionic in device or simulator like this:

ionic run ios

Or goto platform to open project file to run. But how to run in this application? Thanks.

meteor npm vs npm

Hi guys, I have a question regarding the Whatsapp tutorial with meteor CLI. Is there any reason you are using npm instead of meteor npm for this tutorial? I followed the full app tutorial and everything is done using meteor npm. I've used meteor npm without problem until I got to the step where I have to do typings install --save --global dt~moment and I couldn't get past that. I know thats just for the typings for moment package, but how do you do that within meteor CLI?

Thank you