错误TypeError：无法读取角度材料快餐栏中未定义的属性'appendChild'

如何解决错误TypeError：无法读取角度材料快餐栏中未定义的属性'appendChild'

我有一个带有HTML代码的登录表单，如下所示：

<div class="mat-card-centre">
  <mat-card>
    <mat-card-header>
    </mat-card-header>
    <mat-card-content>
      <div class="center">
        <form class="login-form" (keydown)="keyDownFunction($event)" [formGroup]="loginForm">
          <mat-form-field class="login-full-width" appearance="fill">
            <mat-label>Email</mat-label>
            <input matInput [(ngModel)]="email" name="email"  formControlName="emailControl" 
            [class.is-invalid] = "validateEmail.invalid && validateEmail.touched" required>
            <mat-error *ngIf="validateEmail.errors?.required">Email is required</mat-error>
            <mat-error *ngIf="validateEmail.errors?.pattern">Please provide a valid email address</mat-error>
          </mat-form-field>
          <mat-form-field class="login-full-width" appearance="fill">
            <mat-label>Password</mat-label>
            <input matInput [(ngModel)]="password" type="password" name="password"  formControlName="passwordControl" 
            [class.is-invalid] = "validatePassword.invalid && validatePassword.touched" required>
            <mat-error *ngIf="validatePassword.errors?.required">Password is required</mat-error>
          </mat-form-field>          
          <!-- <mat-error *ngIf="submitted && (validateEmail.errors?.required || validatePassword.errors?.required)" class="w3-animate-fading" appearance="fill">
            Provide Email or Password!
          </mat-error> -->
        </form>
        <mat-spinner [diameter]="30" [style.display]="showSpinner ? 'block' : 'none'" ></mat-spinner>
        <mat-card-actions>
          <button mat-raised-button (click)="login()" color="primary">Login</button>
          <button mat-raised-button (click)="openSnackbar('Item Deleted')">
            Show Snackbar
          </button>
        </mat-card-actions>
      </div>
    </mat-card-content>
  </mat-card>
</div>

我的ts文件是这样的

// https://dzone.com/articles/angular-5-material-design-login-application

import { Component,OnInit } from '@angular/core';
import { FormGroup,FormBuilder,Validators,FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { MatSnackBar  } from '@angular/material/snack-bar';

import { UserService } from '../core/data-services/user.service';
import { SessionHelper } from '../core/helpers/session.helper';

@Component({
  selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  // public form: FormGroup;

  submitted: boolean = false;
  loginForm = new FormGroup({
    emailControl: new FormControl('',[
      Validators.required,Validators.pattern('"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$"')
    ]),passwordControl: new FormControl('',[Validators.required])
  });

  get validateEmail(){
    return this.loginForm.get('emailControl')
    }

  get validatePassword(){
    return this.loginForm.get('passwordControl')
  }

  constructor(private fb: FormBuilder,private snackBar: MatSnackBar,private userService: UserService,private sessionHelper: SessionHelper,private router: Router) {
  }

  email: string;
  password: string;
  showSpinner: boolean;

  ngOnInit(): void {
  }

  openSnackbar(message) {
    this.snackBar.open(message);
  } 

  login(): void {
    this.submitted = true;
    if(this.loginForm.invalid){
      this.snackBar.open('Invalid Email or Password!',null,{duration: 2000});
      return;
    }

    this.showSpinner = true;
    this.userService.login(this.email,this.password).subscribe(
      response => {
        this.sessionHelper.onLogin(response,this.email);
        this.showSpinner = false;
        this.router.navigate([`/`]);
      },error => {
        this.showSpinner = false;
        this.snackBar.open(error.error.message,{duration: 3000});
      }
    );
  }
}

但是当转到小吃店时，出现以下错误：

core.js:6185 ERROR TypeError: Cannot read property 'appendChild' of undefined
    at NbOverlayContainerAdapter._createContainer (index.js:2007)
    at NbOverlayContainerAdapter.getContainerElement (overlay.js:1198)
    at Overlay._createHostElement (overlay.js:4233)
    at Overlay.create (overlay.js:4192)
    at MatSnackBar._createOverlay (snack-bar.js:1061)
    at MatSnackBar._attach (snack-bar.js:935)
    at MatSnackBar.openFromComponent (snack-bar.js:853)
    at MatSnackBar.open (snack-bar.js:882)
    at LoginComponent.openSnackbar (login.component.ts:62)
    at LoginComponent_Template_button_click_21_listener (login.component.html:28)