Angular Firebase Chat Tutorial – Part 1

Angular Firebase Chat Tutorial – Part 1

In this video series, I’ll build a chat application from scratch using Angular 4 with Firebase! In Part 1 we’ll set up all of the components and services for our project and hook the app up to a firebase instance. Follow along as I set up user authentication and work with a live Firebase database. We’ll also write all of the UI from scratch without Bootstrap or other a pre-existing CSS framework.

GitHub repo: https://github.com/wesdoyle/base-chat

Check out https://productivedev.com/product/ng-dashboard-net-core-api/ for my latest premium full-stack Angular + .NET Core Web API course.

Pro Members get access to all of my current and future premium courses and Slack channel!

Intro music is “The Mark of a Good Man” by Bimini Road, used with permission. Check out his Bandcamp to listen to more: https://biminiroad.bandcamp.com/album/corinthian-arches

Note that I’m using bash commands on the command line – for this, you’ll need a terminal emulator like Bash on Ubuntu on Windows, Git for Windows, or Cmder. I’m using Cmder, which you can find here: http://cmder.net/

Dependencies:
– Typescript – https://typescriptlang.org
– Node.js – https://nodejs.org/en/



24 Comments

  1. This build has a TOOON of errors when importing at 26:26 and it's pretty annoying I see Wes only has 2 errors at this point. My screen shows a total of 5 and says that none of them exist basically even though they're all listed in the app.module.ts file. Makes no sense, sucks he doesn't provide any kind of support for his videos when people have these issues either.

  2. getting the error, how to fix this issue. in angular 5
    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; }'.

  3. Ok, I'm done. I tried the new implementation, I tried the old one, I got like 10 different errors which were all solvable by deviating from the tutorial more or less, but what I can't figure out is this message:

    Cannot find a differ supporting object 'function observeOnOperatorFunction(source) {
    return source.lift(new ObserveOnOperator (scheduler, delay));
    } of type 'obserOnOperatorFunction'. NgFor only supports binding to Iterables such as Arrays.

    It's the same message both times, with the old FirebaseListObservable from the deprecated folder and the new AngularFireList. Maybe I'm missing some super easy thing but I'm too fed up with googeling error after error after error.
    Maybe you can help me, tho your responses on these vids are limited and I wouldn't remember anything about a video I made 9 months ago either…

  4. FirebaseListObservable is currently deprecated and change to AngularFireList and I get a new problem with it in sendMessage function when you add message: msg. Please kindly help me

  5. Hi sir Greetings on this wonderful work, when I try to subscribe the firebaselistobservable. i have this error rxjs_operators__WEBPACK_IMPORTED_MODULE_4__.switchMap.call(…).subscribe is not a function
    at FirebaseListObservable._subscribe. please can you help me i'm trying to solve it but have no solution yet

  6. hi this.getUser().subscribe(data => {
    debugger
    this.userName = data.displayName;
    });
    Above method is not executing i am getting error like this
    ERROR TypeError: _this.getUser(…).subscribe is not a function

  7. Hello Wes, I m stuck at this problem and unable to sort it out. Please help me.
    core.js:1542 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:4466)
    at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe (common.js:4546)
    at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform (common.js:4527)
    at Object.eval [as updateDirectives] (FeedComponent.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:10756)
    at checkAndUpdateView (core.js:10153)
    at callViewAction (core.js:10394)
    defaultErrorLogger @ core.js:1542
    push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1591
    next @ core.js:4167
    schedulerFn @ core.js:3403
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
    push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
    push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3395
    (anonymous) @ core.js:3693
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
    push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
    push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3630
    onHandleError @ core.js:3693
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
    push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:191
    push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
    ZoneTask.invoke @ zone.js:485
    timer @ zone.js:2054
    setTimeout (async)
    scheduleTask @ zone.js:2075
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
    onScheduleTask @ zone.js:297
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
    push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
    push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
    scheduleMacroTaskWithCurrentZone @ zone.js:1114
    (anonymous) @ zone.js:2090
    proto.(anonymous function) @ zone.js:1394
    hostReportError @ hostReportError.js:3
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:203
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.error @ Subscriber.js:146
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:80
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
    push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:49
    push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:28
    push../node_modules/@angular/common/fesm5/common.js.ObservableStrategy.createSubscription @ common.js:4466
    push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe @ common.js:4546
    push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform @ common.js:4527
    (anonymous) @ FeedComponent.html:2
    debugUpdateDirectives @ core.js:10756
    checkAndUpdateView @ core.js:10153
    callViewAction @ core.js:10394
    execComponentViewsAction @ core.js:10336
    checkAndUpdateView @ core.js:10159
    callViewAction @ core.js:10394
    execComponentViewsAction @ core.js:10336
    checkAndUpdateView @ core.js:10159
    callViewAction @ core.js:10394
    execEmbeddedViewsAction @ core.js:10357
    checkAndUpdateView @ core.js:10154
    callViewAction @ core.js:10394
    execComponentViewsAction @ core.js:10336
    checkAndUpdateView @ core.js:10159
    callWithDebugContext @ core.js:11046
    debugCheckAndUpdateView @ core.js:10724
    push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges @ core.js:8540
    (anonymous) @ core.js:4429
    push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4429
    (anonymous) @ core.js:4322
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
    onInvoke @ core.js:3671
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
    push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
    push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3585
    next @ core.js:4322
    schedulerFn @ core.js:3403
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
    push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
    push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3395
    checkStable @ core.js:3640
    onHasTask @ core.js:3684
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
    push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
    push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
    drainMicroTaskQueue @ zone.js:595
    Promise.then (async)
    scheduleMicroTask @ zone.js:578
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
    push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
    push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
    scheduleResolveOrReject @ zone.js:862
    ZoneAwarePromise.then @ zone.js:962
    push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4200
    ./src/main.ts @ main.ts:11
    _webpack_require_ @ bootstrap:76
    0 @ routes.ts:11
    _webpack_require_ @ bootstrap:76
    checkDeferredModules @ bootstrap:43
    webpackJsonpCallback @ bootstrap:30
    (anonymous) @ main.js:1

  8. Some of the things used in this video are deprecated in the latest version. Use this to get this app working without changing code.
    npm install firebase@3.6.6 angularfire2@4.0.0-rc.0 –save

  9. ERROR in app.module.ts(15,37): error TS2307: Cannot find module './app/signup-form/signup-form.component'.
    ../routes.ts(2,37): error TS2307: Cannot find module './app/signup-form/signup-form.component'.

    ????

  10. please help me give me this error

    ChatFormComponent.html:1 ERROR TypeError: Cannot read property 'list' of undefined
    at ChatService.push../src/app/services/chat.service.ts.ChatService.getMessages (chat.service.ts:39)
    at ChatService.push../src/app/services/chat.service.ts.ChatService.sendMessage (chat.service.ts:24)
    at ChatFormComponent.push../src/app/chat-form/chat-form.component.ts.ChatFormComponent.send (chat-form.component.ts:17)
    at ChatFormComponent.push../src/app/chat-form/chat-form.component.ts.ChatFormComponent.handleSubmit (chat-form.component.ts:22)
    at Object.eval [as handleEvent] (ChatFormComponent.html:4)
    at handleEvent (core.js:10259)
    at callWithDebugContext (core.js:11352)
    at Object.debugHandleEvent [as handleEvent] (core.js:11055)
    at dispatchEvent (core.js:7718)
    at core.js:8162

  11. Hi wes,great tutorial here..im getting this error when trying o get messages fro firebase:

    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:4475)
    at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe (common.js:4555)
    at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform (common.js:4536)
    at Object.eval [as updateDirectives] (FeedComponent.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11059)
    at checkAndUpdateView (core.js:10456)
    at callViewAction (core.js:10697)
    defaultErrorLogger @ core.js:1671
    push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1717
    next @ core.js:4317
    schedulerFn @ core.js:3553
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
    push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
    push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3537
    (anonymous) @ core.js:3844
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
    push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
    push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3781
    onHandleError @ core.js:3844
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
    push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:191
    push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
    ZoneTask.invoke @ zone.js:485
    timer @ zone.js:2054
    setTimeout (async)
    scheduleTask @ zone.js:2075
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
    onScheduleTask @ zone.js:297
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
    push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
    push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
    scheduleMacroTaskWithCurrentZone @ zone.js:1114
    (anonymous) @ zone.js:2090
    proto.(anonymous function) @ zone.js:1394
    hostReportError @ hostReportError.js:3
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:203
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.error @ Subscriber.js:146
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:80
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
    push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:49
    push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:28
    push../node_modules/@angular/common/fesm5/common.js.ObservableStrategy.createSubscription @ common.js:4475
    push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe @ common.js:4555
    push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform @ common.js:4536
    (anonymous) @ FeedComponent.html:2
    debugUpdateDirectives @ core.js:11059
    checkAndUpdateView @ core.js:10456
    callViewAction @ core.js:10697
    execComponentViewsAction @ core.js:10639
    checkAndUpdateView @ core.js:10462
    callViewAction @ core.js:10697
    execComponentViewsAction @ core.js:10639
    checkAndUpdateView @ core.js:10462
    callViewAction @ core.js:10697
    execEmbeddedViewsAction @ core.js:10660
    checkAndUpdateView @ core.js:10457
    callViewAction @ core.js:10697
    execComponentViewsAction @ core.js:10639
    checkAndUpdateView @ core.js:10462
    callWithDebugContext @ core.js:11349
    debugCheckAndUpdateView @ core.js:11027
    push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges @ core.js:8843
    (anonymous) @ core.js:4579
    push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4579
    (anonymous) @ core.js:4471
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
    onInvoke @ core.js:3822
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
    push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
    push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3736
    next @ core.js:4471
    schedulerFn @ core.js:3553
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
    push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
    push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
    push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3537
    checkStable @ core.js:3791
    onHasTask @ core.js:3835
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
    push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
    push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
    drainMicroTaskQueue @ zone.js:595
    Promise.then (async)
    scheduleMicroTask @ zone.js:578
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
    push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
    push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
    scheduleResolveOrReject @ zone.js:862
    ZoneAwarePromise.then @ zone.js:962
    push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4351
    ./src/main.ts @ main.ts:11
    _webpack_require_ @ bootstrap:76
    0 @ routes.ts:11
    _webpack_require_ @ bootstrap:76
    checkDeferredModules @ bootstrap:43
    webpackJsonpCallback @ bootstrap:30
    (anonymous) @ main.js:1

  12. hay wes doyle first of all i watched your video tutorial above and i think it's such as a good explanation for making a realtime aplication using angular and firebase database. thank you so much for making the video i realy like it. i have visited your github pages and i have clone youre projects for my training hope you don't mind of it. actually i wanna ask u about that project if don't mind. i've clone the project and tried to run it, but after i update the project using angular cli to run it into angular 6 cli and also updated the typscript module i got some error it said "Failed to load resource: the server responded with a status of 404 (Not Found)" in the console hope fully u wanna help me with that thank you so much

  13. 43:16 I did the same and console show an error Please Pix it for me..

    core.js:1673 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)

  14. I'm getting ERROR TypeError: rxjs_operators__WEBPACK_IMPORTED_MODULE_4__.switchMap.call(…).subscribe is not a function . I'm using import {…..} from 'angularfire2/database-deprecated';
    Please help

  15. I need help, when i import the AngularFireDatabaseModule the project explode, throws a lot of files like ./node_modules/@angular/fire/database/observable/fromRef.js 2:0-51
    [1] @ ./node_modules/@angular/fire/database/public_api.js
    [1] @ ./node_modules/@angular/fire/database/index.js
    [1] @ ./node_modules/angularfire2/database/index.js

Leave a Reply

Your email address will not be published.