title: ERROR TypeError: You provided 'null' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
body: <p>I searched everywhere for an answer but I couldn't get out this issue.
  I found that many people are having this issues with Observables in Angular but usually it was just a syntax error. I tried many things (I will list them below) but I'm confused. I don't know why it does like this.</p>
  <p><strong>ERROR:</strong></p>
  <blockquote>
  <p>ERROR TypeError: You provided 'null' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.</p>
  </blockquote>
  <p>That's not a functionality error. In fact, it works perfectly with my expectations, but it throws an error to the console.</p>
  <p><strong>EXPECTATION:</strong><br>
  It's just an ngIf directive that manages the view of a menu content. If the user is logged, it should view certain menu-items (for ex. 'My profile', etc...), if not, it should only see 'Login' and 'Signup' buttons. It actually works this kind of system, but I receive a console error.</p>
  <p><strong>WHAT I TRIED:</strong><br>
  Googling around I tried many things. The one listed below are only few of them, but at some point I was just trying without knowing really how to solve the problem.</p>
  <p>In the first try (which I will not list here because it was pretty long), I tried to switchMap the angular fire auth state to get the logged status, then I setted this.appUser$ to this.userService.get(user.uid), to return user data from the database. This will be the final result, but after getting the error I simplified by a lot the code to find out what can be the issue with that, hoping that it was easier. In fact, I didn't solved anything in 3 days of tries.</p>
  <ol>
  <li>
  <blockquote>
  <p>navbar.component.html</p>
  </blockquote>
  </li>
  </ol>
  <pre><code>&lt;mat-menu #userMenu=&quot;matMenu&quot;&gt;
    &lt;ng-template matMenuContent &gt;
      &lt;div class=&quot;menuContent&quot; *ngIf=&quot;(appUser$ | async) as user; else notLoggedMenuitems&quot;&gt;
        &lt;div mat-menu-item&gt;
          &lt;div class=&quot;row no-gutters ml-2 mr-2&quot;&gt;
            &lt;div class=&quot;col-auto&quot;&gt;&lt;img [src]=&quot;user.photoURL&quot; class=&quot;user-profile-img&quot; alt=&quot;Profile image&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;col&quot;&gt;&lt;p class=&quot;mat-body-strong mb-0 ml-3&quot; style=&quot;line-height: 350%;&quot;&gt;&lt;b&gt;{{ user.displayName }}&lt;/b&gt;&lt;/p&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;mat-divider class=&quot;mt-2&quot;&gt;&lt;/mat-divider&gt;
        &lt;div mat-menu-item&gt;...&lt;/div&gt;
        &lt;div mat-menu-item&gt;...&lt;/div&gt;
        &lt;mat-divider&gt;&lt;/mat-divider&gt;
        &lt;div mat-menu-item (click)=&quot;logout()&quot;&gt;Logout&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;ng-template #notLoggedMenuitems&gt;
        &lt;div mat-menu-item routerLink=&quot;/auth/login&quot;&gt;Login&lt;/div&gt;
        &lt;div mat-menu-item routerLink=&quot;/auth/signup&quot;&gt;Signup&lt;/div&gt;
      &lt;/ng-template&gt;
    &lt;/ng-template&gt;
  &lt;/mat-menu&gt;
  </code></pre>
  <ol>
  <li>
  <blockquote>
  <p>navbar.component.ts</p>
  </blockquote>
  </li>
  </ol>
  <pre><code>export class NavbarComponent implements OnInit {
  
    appUser$: Observable&lt;firebase.User&gt;;
  
    constructor(private auth: AngularFireAuth) {
      this.appUser$ = this.auth.user;
    }
  
    ngOnInit(): any {
    }
  
    logout(): void {
      this.auth.signOut();
    }
  
  }
  </code></pre>
  <ol start="2">
  <li>
  <blockquote>
  <p>navbar.component.html<br>
  I changed the ngIf directive to the one below, removing the else block. I tried even with other operators like &quot; ! &quot; and so on, but nothing changed...</p>
  </blockquote>
  </li>
  </ol>
  <pre><code>*ngIf=&quot;(appUser$ | async)&quot;
  </code></pre>
  <ol start="2">
  <li>
  <blockquote>
  <p>navbar.component.ts</p>
  </blockquote>
  </li>
  </ol>
  <pre><code>export class NavbarComponent implements OnInit {
  
    appUser$: Observable&lt;firebase.User&gt; = this.auth.user;
  
    constructor(private auth: AngularFireAuth) {}
  
    ngOnInit(): any {
    }
  
    logout(): void {
      this.auth.signOut();
    }
  
  }
  </code></pre>
  <p><strong>CONCLUSION:</strong><br>
  How can I do this? I don't know why typescript throws this error.
  <br><br></p>
  <p><strong>UPDATE 1:</strong><br>
  Updated navbar.component.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-menu #userMenu=&quot;matMenu&quot;&gt;
    &lt;ng-template matMenuContent &gt;
      &lt;div class=&quot;menuContent&quot; *ngIf=&quot;(appUser$ | async) as user; else notLoggedMenuitems&quot;&gt;
        &lt;div mat-menu-item&gt;
          &lt;div class=&quot;row no-gutters ml-2 mr-2&quot;&gt;
            &lt;div class=&quot;col-auto&quot;&gt;&lt;img [src]=&quot;user.details.imgUrl&quot; class=&quot;user-profile-img&quot; alt=&quot;Profile image&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;col&quot;&gt;&lt;p class=&quot;mat-body-strong mb-0 ml-3&quot; style=&quot;line-height: 350%;&quot;&gt;&lt;b&gt;{{ user.name }}&lt;/b&gt;&lt;/p&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;mat-divider class=&quot;mt-2&quot;&gt;&lt;/mat-divider&gt;
        &lt;ng-container *ngIf=&quot;user.roles.admin&quot;&gt;
          &lt;div mat-menu-item&gt;&lt;mat-icon&gt;local_bar&lt;/mat-icon&gt;Manage Drinks&lt;/div&gt;
            &lt;div mat-menu-item&gt;&lt;mat-icon&gt;note_add&lt;/mat-icon&gt;Add Drinks&lt;/div&gt;
            &lt;mat-divider&gt;&lt;/mat-divider&gt;
        &lt;/ng-container&gt;
        &lt;div mat-menu-item&gt;&lt;mat-icon&gt;settings&lt;/mat-icon&gt;My Profile&lt;/div&gt;
        &lt;div mat-menu-item&gt;&lt;mat-icon&gt;wine_bar&lt;/mat-icon&gt;My Drinks&lt;/div&gt;
        &lt;div mat-menu-item&gt;&lt;mat-icon&gt;favorite&lt;/mat-icon&gt;Wishlist&lt;/div&gt;
        &lt;mat-divider&gt;&lt;/mat-divider&gt;
        &lt;div mat-menu-item (click)=&quot;logout()&quot;&gt;Logout&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;ng-template #notLoggedMenuitems&gt;
        &lt;div mat-menu-item routerLink=&quot;/auth/login&quot;&gt;Login&lt;/div&gt;
        &lt;div mat-menu-item routerLink=&quot;/auth/signup&quot;&gt;Signup&lt;/div&gt;
      &lt;/ng-template&gt;
    &lt;/ng-template&gt;
  &lt;/mat-menu&gt;
  </code></pre>
  <p>Updated navbar.component.ts</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { AngularFireAuth } from '@angular/fire/auth';
  import { Observable } from 'rxjs';
  
  import { AuthenticationService } from './../../../auth/authentication/authentication.service';
  import { User } from './../../../auth/authentication/models/user.model';
  
  
  
  @Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.scss']
  })
  export class NavbarComponent implements OnInit {
  
    appUser$: Observable&lt;User&gt;;
  
    constructor(private authService: AuthenticationService, private auth: AngularFireAuth) {
    }
  
    ngOnInit(): any {
      this.appUser$ = this.authService.user$;
      this.appUser$.subscribe(res =&gt; console.log('in app user: ', res));
    }
  
    logout(): void {
      this.auth.signOut();
    }
  
  }
  </code></pre>
  <p>Updated authentication.service.ts</p>
  <pre class="lang-js prettyprint-override"><code>private initUser(): void {
    this.user$ = this.afAuth.authState.pipe(
      switchMap(user =&gt; {
        if (user) {
          return this.db.doc$&lt;User&gt;(`users/${user.uid}`);
        } else {
          return undefined;
        }
      })
    );
  }
  </code></pre>
  <p><strong>UPDATE 2:</strong><br>
  Updated authentication.service.ts</p>
  <pre class="lang-js prettyprint-override"><code>private initUser(): void {
    this.user$ = this.afAuth.authState.pipe(
      switchMap(user =&gt; {
        if (user) {
          return this.db.doc$&lt;User&gt;(`users/${user.uid}`);
        } else {
          return new Observable&lt;User&gt;();
        }
      })
    );
  }
  </code></pre>
  <p>Now I don't see the error anymore. But the user image doesn't shows well... I don't know if that's a good method to do things though.</p>