angular - クリックしてもダイアログが正しく表示されない

Question

dialog-example と dialog フォルダーに基づいて、https://github.com/gopinav/Angular-Material-Tutorial/tree/master/material-demo/src/appからこのチュートリアルからダイアログモーダルをポップアップすることをテストしています.

ただし、ローカルホストでテストするために実行すると、このエラーが発生します

ModalComponent のコンポーネント ファクトリが見つかりません。@NgModule.entryComponents に追加しましたか?

こんな感じで割りました

nav.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex container">
        <div class="navbar-brand redirect" routerLink="">Gigworks Authentication</div>
        <div class="d-flex ml-auto">
            <div class="nav-link redirect" *ngIf="isLoggedOut$ | async" (click)="openModal()">Login</div>
            <div *ngIf="isLoggedIn$ | async" (click)="this.toggle()">
                <div class="nav-link redirect" *ngIf="(user$ | async) as user" routerLink="dashboard">
                    {{(user.username)}}</div>
            </div>
            <div class="nav-link redirect" (click)="logout()" *ngIf="isLoggedIn$ | async">Logout</div>
        </div>
    </div>
</nav>

nav.ts

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import { AngularFireAuth } from "@angular/fire/auth";
import { MatDialog } from '@angular/material';
import { ModalComponent } from '../../modal/modal.component';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  constructor(
    public afAuth: AngularFireAuth,
    public dialog: MatDialog
    ) { }

  ...

  openModal() {
    let dialogRef = this.dialog.open(ModalComponent)
    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  };
}

そして modal.html について

<h2 mat-dialog-title>Welcome Back</h2>
<mat-dialog-content>Lorem Ipsum</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close="true">Keep me logged in</button>
  <button mat-button mat-dialog-close="false">Log out</button>
</mat-dialog-actions>

modal.ts

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ModalService {
    private modals: any[] = [];

    open(id: string) {
        // open modal specified by id
        let modal: any = this.modals.filter(x => x.id === id)[0];
        modal.open();
    }

    close(id: string) {
        // close modal specified by id
        let modal: any = this.modals.filter(x => x.id === id)[0];
        modal.close();
    }
}

このエラー メッセージの原因となっている何かを見落とした可能性はありますか?