Auth0-Angular app homepage went blank after add "public auth: AuthService" to nav-bar component constructor

I follow the Auth0 tutorial "User Login and Logout - Authenticating Your Angular App Part 1". I try to add log in and log out buttons to the navbar. Before adding the buttons and authService, the homepage shows correctly: correct homepage without auth

and the nav-bar.component.ts is

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

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

However, when I change constructor() {} to constructor(public auth: AuthService) {}, the webpage became blank - nothing shows up. I am not sure what happened. Please help.

Due to this problem, I can not add the login/logout button.

nav-bar.component.html:

<div class="nav-container mb-3">
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container">
      <div class="navbar-brand logo"></div>
      <app-main-nav></app-main-nav>
      <!-- <app-login-button></app-login-button>
      <app-logout-button></app-logout-button> -->
    </div>
  </nav>
</div>

login-button-component.ts:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-login-button',
  templateUrl: './login-button.component.html',
  styles: [
  ]
})
export class LoginButtonComponent implements OnInit {

  constructor(public auth: AuthService) { }

  ngOnInit(): void {
  }

  loginWithRedirect(): void {
    this.auth.loginWithRedirect();
  }

}

login-button.component.html:

<button class="btn btn-primary btn-block" (click)="loginWithRedirect()">
    Log in
</button>

logout-button.components.ts:

import { DOCUMENT} from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-logout-button',
  templateUrl: './logout-button.component.html',
  styles: [
  ]
})
export class LogoutButtonComponent implements OnInit {

  constructor(public auth: AuthService, @Inject(DOCUMENT) private doc:Document) {}

  ngOnInit(): void {
  }

  logout(): void {
    this.auth.logout({ returnTo: this.doc.location.origin});
  }

}

logout-button.component.html:

<button class="btn btn-danger btn-block" (click)="logout()">
    Log out
</button>