Dfyjkt

I have an angular 6 with firebase application
I have a Service with an observable (i later want multiple subscribers listening to this same observable)
and also a component that subscribes to this observable
what im trying to achieve is to get the auth object, get the userId (UID) from it and search the db for all documents with this id

the component is calling the observable at the ngOnInit hook but at the stage its still null so i get

Cannot read property 'subscribe' of undefined

the problem is that if i run the code to fill the observable inside the subscribe block (to get the auth data) that i dont get to see the data, if its outside of it (running sync using static UID) than it does get filled correctly and shows data
here is the code for the service

import Injectable, EventEmitter from '@angular/core';
import AngularFirestore, AngularFirestoreCollection, DocumentChangeAction from '@angular/fire/firestore';
import Expense from '../model/Expense';
import Observable, ReplaySubject, Subject, from from 'rxjs';
import map from 'rxjs/operators';
import AuthService from '../core/services/auth.service';

@Injectable(
 providedIn: 'root',
)
export class ExpenseService 

 private dbPath = '/expenses';

 expenseDetailEvent: EventEmitter<Expense> = new EventEmitter<Expense>();

 expensesRef: AngularFirestoreCollection<Expense> = null;
 expenses$: Observable<Expense>;

 constructor(private db: AngularFirestore, auth: AuthService) 
 auth.user$.subscribe(
 user => 
 this.expensesRef = this.db.collection<Expense>(this.dbPath, ref =>
 ref.where('clientId', '==', user.uid)
 );
 this.expenses$ = this.expensesRef.snapshotChanges().pipe(
 map(actions =>
 actions.map(a => 
 const data = a.payload.doc.data() as Expense;
 const id = a.payload.doc.id;
 return id, ...data ;
 )
 )
 );
 ,
 error => console.log(error)
 );
 

 createExpense(expense: Expense): Observable<any> 
 return from(this.expensesRef.add(expense));
 

 updateExpense(expense: Expense): Observable<any> 
 return from(this.expensesRef.doc(expense.id).update(expense));
 

and the component just does

ngOnInit() 
 this.expenseService.expenses$.subscribe(expenses => this.expenses = expenses);
 

i noticed that all the examples on line, call this on the component, but i feel that the database call should be in a service in a similar way that its done with normal http api calls

UPDATE
if i initialize the service like this

expenses$: Observable<Expense> = of();

so of course the app doesnt crash, but i dont see any data
if i just pull the code outside and use static UID than it does... (of course user.uid is the same as the static string i pasted)

here is the updated code

constructor(private db: AngularFirestore, auth: AuthService) 
 console.log('being here ,i see the data on screen using the static uid');
 this.expensesRef = this.db.collection<Expense>(this.dbPath, ref =>
 ref.where('clientId', '==', 'noYVScDtKfNB5aFqRkAJR7ghxio2')
 );
 this.expenses$ = this.expensesRef.snapshotChanges().pipe(
 map(actions =>
 actions.map(a => 
 const data = a.payload.doc.data() as Expense;
 const id = a.payload.doc.id;
 return id, ...data ;
 )
 )
 );
 auth.user$.subscribe(
 user => 
 console.log('if inside here than it will not show any data on screen');

 ,
 error => console.log(error)
 );

The issue is that the expenses$ Observable will be defined only after the auth.user$ has emitted something, because then is when it gets assigned.

Solution 1
You could try injecting ExpenseService service in the constructor of a higher level component, maybe even AppComponent, so that the ExpenseService's constructor gets called and the expenses$ Observable gets assigned (you just need to inject it, without any method call or property access). At this point by the time you load the component the Observable should be defined

Solution 2
Manually create the Observable expenses$ using of and then subscribing to this.expensesRef.snapshotChanges() you can emit values back in expenses$

Something like:

...

expensesSubject = new Subject<Expense>();
expenses$: from(expensesSubject);

constructor(private db: AngularFirestore, auth: AuthService) 
 auth.user$.subscribe(
 user => 
 this.expensesRef = this.db.collection<Expense>(this.dbPath, ref =>
 ref.where('clientId', '==', user.uid)
 );
 this.expensesRef.snapshotChanges().pipe(
 map(actions =>
 actions.map(a => 
 const data = a.payload.doc.data() as Expense;
 const id = a.payload.doc.id;
 return id, ...data ;
 )
 )
 ).subscribe((whatever) => 
 expensesSubject.next(whatever);
 )
 
 )