Building Real-time Apps with Firebase part 10, Async Pipe error

Angular
1

I’m coding along with Mosh on his tutorial, using the same Angular version, although a different Angularfire version due to angularfire2 being deprecated and succeeded by @angular/fire.

I’m doing exactly as he does with no compiler errors, but upon launching the code from the end of the video, nothing is appearing on the website project where it should be showing the contents of the Firebase database linked. I can make content show via using <td> course </td> in app.component.html, but I still have to subscribe manually in app.component.ts and assume the entire point of the tutorial was to utilize async anyway.

In addition to nothing appearing on localhost:4200, the console reports the following:
ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'.

Here is the Component and HTML view:

//app.component.ts

import { Component, OnDestroy } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';

import { Subscription } from 'rxjs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  courses$

  constructor(db: AngularFireDatabase) {
    this.courses$ = db.list('/courses');
  }
}

//app.component.html

<ul>
  <li *ngFor="let course of courses$ | async ">
    {{ course.$value  }}
  </li>
</ul>