wesdoyle / base-chat Goto Github PK

getMessages(): FirebaseListObservable<ChatMessage[]> {
// query to create our message feed binding
return this.db.list('message',{
query: {
limitToLast: 20,
orderByKey: true
}
});
}

Hello, I am getting the following error on the sendMessage() method.

Argument of type '{ message: string; timeSent: string; userName: Observable; email: string; }' is not assignable to parameter of type 'ChatMessage[]'.

Here is my code:

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable, Subject } from 'rxjs';
import { AuthService } from '../services/auth.service';
import * as firebase from 'firebase/app';
import { switchMap }  from 'rxjs/operators';

import { ChatMessage } from '../models/chat-message.model';

@Injectable()
export class ChatService {
  user: firebase.User;
  chatMessages: AngularFireList<ChatMessage[]>;
  chatMessage: ChatMessage;
  userName: Observable<string>;

  constructor(
    private db: AngularFireDatabase,
    private afAuth: AngularFireAuth
    ) {
        this.afAuth.authState.subscribe(auth => {
          if (auth !== undefined && auth !== null) {
            this.user = auth;
          }

          this.getUser().update(a => {
            this.userName = a.displayName;
          });
        });
    }

  getUser() {
    const userId = this.user.uid;
    const path = `/users/${userId}`;
    return this.db.object(path);
  }

  getUsers() {
    const path = '/users';
    return this.db.list(path);
  }

  sendMessage(msg: string) {
   
    const timestamp = this.getTimeStamp();
    const email = this.user.email;
    this.chatMessages = this.getMessages();
    this.chatMessages.push({
      message: msg,
      timeSent: timestamp,
      userName: this.userName,
      email: email }).;
  }

  getMessages(): AngularFireList<ChatMessage[]> {
    // query to create our message feed binding
    return this.db.list('/messages', ref=> 
     ref.limitToLast(25).orderByKey()
    );

 
   
  }

  getTimeStamp() {
    const now = new Date();
    const date = now.getUTCFullYear() + '/' +
                 (now.getUTCMonth() + 1) + '/' +
                 now.getUTCDate();
    const time = now.getUTCHours() + ':' +
                 now.getUTCMinutes() + ':' +
                 now.getUTCSeconds();

    return (date + ' ' + time);
  }
}

ERROR in src/app/services/chat.service.ts(56,37): error TS2345: Argument of type '{ query: { limitToLast: number; orderByKey: boolean; }; }' is not assignable to parameter of type 'FirebaseListFactoryOpts'.
Types of property 'query' are incompatible.
Type '{ limitToLast: number; orderByKey: boolean; }' is not assignable to type 'Query'.
Property 'endAt' is missing in type '{ limitToLast: number; orderByKey: boolean; }'.

This is the error I'm currently facing right now. Hope you could help me. Thank you.

'query' does not exist in type 'QueryFn'

    return this.db.list('messages', {
      query: {
        limitToLast: 25,
        orderByKey: true
      }
    });
  }```
how can I fix that

import { Injectable } from '@angular/core';
//import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireDatabase,FirebaseListObservable } from 'angularfire2/database-deprecated';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../services/auth.service';
import * as firebase from 'firebase/app';
import { ChatMessage } from '../models/chat-message.model'

@Injectable()
export class ChatService {
user: any;
chatMessages: FirebaseListObservable<ChatMessage[]>;
chatMessage: ChatMessage;
userName: Observable;

constructor( private db: AngularFireDatabase, private afAuth: AngularFireAuth){
this.afAuth.authState.subscribe(auth=>{
//We have set user to auth if it is not undefined or null
if(auth !== undefined && auth !== null){
this.user=auth;
}
});
}

//Function to send message
sendMessage(msg:string){
var timestamp= this.getTimeStamp();
var email= this.user.email;
this.chatMessages=this.getMessages();
this.chatMessages.push({
message: msg,
timeSent: timestamp,
userName: this.userName,
email1: email
});
}

//Function to get timeStamp
getTimeStamp(){
const now = new Date();
const date = now.toLocaleDateString();
const time = now.toLocaleTimeString();
return(date+ ' ' + time);
}

//this function gets message from firebase.
getMessages(): FirebaseListObservable<ChatMessage[]> {
// query to create our message feed binding
return this.db.list('messages', {
query: {
limitToLast: 25,
orderByKey: true
}
});
}
}

Above is my complete chatService code (still corrections required in getTimeStamp() )
But the error in the query won't go. Please help me out asap.

ChatFormComponent.html:6 ERROR TypeError: this.getTimeStamp is not a function
at ChatService.sendMessage (chat.service.ts:44)
at ChatFormComponent.send (chat-form.component.ts:18)
at Object.eval [as handleEvent] (ChatFormComponent.html:7)
at handleEvent (core.js:13530)
at callWithDebugContext (core.js:15039)
at Object.debugHandleEvent [as handleEvent] (core.js:14626)
at dispatchEvent (core.js:9945)
at eval (core.js:10570)
at HTMLButtonElement.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)

Getting this error on my console pls help.

On latest angularfire2 (5.0.0-rc.4) I think FirebaseListObservable is deprecated. Not working for me.
Can help to upgrade latest version.

I am having an error regarding timeStamp.In chat.service.ts U I am applying the code below.
this.chatMessages.push({
message:msg,
timeSent:this.timestamp,
email:email,
userName:"this.userName"
});
But it's not showing anything for the timeSent on the console and not in the firebase database. I am not having any idea how to debug it.

When i try to ng serve, i am getting this error

"Module mylistoffiles/node_modules/angularfire2/database/index"' has no exported member 'FirebaseListObservable'."

i have reinstalled firebase2, angular 4, and typescript multiple times now and no luck. Any help would be much appreciated

edit: Was able to fix this my changing 'angularfire2/database' in my imports to 'angularfire2/database-deprecated'

For some reason I get this error trying to code in the async pipe on feed.component.html:

invalidpipeargument: '[object object]' for pipe 'asyncpipe'

Anyone else having the same issue?

I'm currently using angular 6

i did all the same in feed.component.ts

import { Component, OnInit, OnChanges } from '@angular/core';
import { ChatService } from '../services/chat.service';
import { Observable } from 'rxjs';
import { chatMessegeModel } from '../models/chat-message.model';
import { FirebaseListObservable } from 'angularfire2/database';

@component({
selector: 'app-feed',
templateUrl: './feed.component.html',
styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit, OnChanges {
feed: FirebaseListObservable<chatMessegeModel[]>;

constructor(private chat: ChatService) { }

ngOnInit() {
this.feed = this.chat.getMessages();
}

ngOnChanges() {
this.feed = this.chat.getMessages();
}

}
and the Template:

*ngFor="let message of feed | async"
<app-message [chatMessage]=message >

But the console show me this Error:

ERROR TypeError: rxjs_operators__WEBPACK_IMPORTED_MODULE_4__.switchMap.call(...).subscribe is not a function
at FirebaseListObservable._subscribe (firebase_list_factory.js:75)
at FirebaseListObservable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
at FirebaseListObservable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
at ObservableStrategy.push../node_modules/@angular/common/fesm5/common.js.ObservableStrategy.createSubscription (common.js:4498)
at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe (common.js:4578)
at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform (common.js:4559)
at Object.eval [as updateDirectives] (FeedComponent.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:11061)
at checkAndUpdateView (core.js:10458)
at callViewAction (core.js:10699

Hi wes doyle, thanks you for this great ressource.
I have some problems to build the project when i run ng serve. It shows me the following error:
/node_modules/angularfire2/interfaces.d.ts (12,32): Namespace 'firebase' has no exported member 'Promise'.
How to fix it?
Thanks in advance

Step1. Create your firebase project, copy the link to firebase variable and paste it on environment.ts file.
Step2. Open the terminal, and run npm install
Step3. run npm install --s [email protected] @angular/fire
Step4. Open every css file and remove the background attribute:
#logo{
display: inline-block;
/* background: url('../../assets/img/logo.png') no-repeat;*/
background-size: cover;
margin: 12px 10px 12px 32px;
width: 60px;
height: 60px;
min-width: 60px;
}
or you can comment the background.
Step5. Run ng serve

ERROR in src/app/services/chat.service.ts(48,7): error TS2345: Argument of type '{ query: { limitToLast: number; orderByKey: boolean; }; }' is not assignable to parameter of type 'QueryFn'.
Object literal may only specify known properties, and 'query' does not exist in type 'QueryFn'.
../../node_modules/rxjs-compat/Observable.d.ts(1,28): error TS2307: Cannot find module 'rxjs'.
../../node_modules/rxjs-compat/Observable.d.ts(2,70): error TS2307: Cannot find module 'rxjs'.

how can we use this code with angular 7.
and can we use this code in angular 7