wesdoyle / base-chat Goto Github PK
View Code? Open in Web Editor NEWA simple chat application built using Angular and Firebase
A simple chat application built using Angular and Firebase
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'
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.
getMessages(): FirebaseListObservable<ChatMessage[]> {
// query to create our message feed binding
return this.db.list('message',{
query: {
limitToLast: 20,
orderByKey: true
}
});
}
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'.
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
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.
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?
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.
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
'query' does not exist in type 'QueryFn'
return this.db.list('messages', {
query: {
limitToLast: 25,
orderByKey: true
}
});
}```
how can I fix that
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.
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
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);
}
}
how can we use this code with angular 7.
and can we use this code in angular 7
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.