В диалоговом окне angular 9 материал отображается пустым в левом конце

Question

Мне нужна помощь в отображении диалогового окна. добавив шаги, которые я выполнил для выполнения этого действия ниже.

Пакеты, установленные в проекте:

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@angular/cdk                      6.4.7
@angular/flex-layout              9.0.0-beta.29-7a22fba
@angular/material                 6.4.7
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

Следующий созданный компонент входа

html file

<mat-toolbar color="primary">
        Login 
      <span class="flex-spacer"></span>
      <button mat-button mat-dialog-close>&times;</button>
    </mat-toolbar>

Ts file

import { Component, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<LoginComponent>) { }

  ngOnInit(): void {
  }

}

Тогда я включил в заголовочный компонент

html code

<a mat-button (click)="openLoginForm()"><span class="fa fa-sign-in fa-lg"></span> Login</a>

Ts код

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';
import { LoginComponent } from '../login/login.component';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
constructor(public dialog: MatDialog ) { }

  ngOnInit() {
  }

  openLoginForm() {
    this.dialog.open(LoginComponent, {width: '500px', height: '450px'});
  }

}

Вызывается в модуле приложения

....
import { MatDialogModule } from '@angular/material/dialog';
import { LoginComponent } from './login/login.component';
....
@NgModule({
  declarations: [
...
  LoginComponent
  ],
imports: [
...
MatDialogModule,
  ],
 entryComponents: [LoginComponent],
  providers: [],
  bootstrap: [AppComponent],

})

При нажатии кнопки

в левом углу появляется пустое диалоговое окно

Также ошибка консоли ниже

ERROR TypeError: Cannot read property 'hasAttached' of undefined
    at MatDialogContainer.attachComponentPortal (dialog.js:170)
    at MatDialog._attachDialogContent (dialog.js:708)
    at MatDialog.open (dialog.js:603)
    at HeaderComponent.openLoginForm (header.component.ts:16)
    at HeaderComponent_Template_a_click_16_listener (header.component.html:8)
    at executeListenerWithErrorHandling (core.js:21693)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21742)
    at HTMLAnchorElement.<anonymous> (platform-browser.js:934)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41264)

Пожалуйста, помогите немного по этому вопросу.