App not showing dialog instead, my application shows the dialog as a component on my page

I am making a test application, were I use a dialog when I click on a button.
I did everything suggested here (https://material.angular.io/components/dialog/overview), but I cannot understand why it’s not working

Instead of showing my component as a dialog, it just shows my dialog on my page (not a dialog) see my screenshot. What is in the red box should be opening as a dialog

https://i.imgur.com/jUQD8Yg.png

I’ve tried some different things already, also searched some solutions on the internet, even here on StackOverflow. But nothing seems to work at this moment.

Home component:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { saveAs } from 'file-saver';
import { ok } from 'assert';
declare var require: any;
import {MatDialog, MatDialogConfig} from "@angular/material";
import { TestDialogComponent } from './test-dialog/test-dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient, public dialog: MatDialog) {}

 openDialog() {
    const dialogRef = this.dialog.open(TestDialogComponent);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

Dialog:

import { Component, OnInit, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
  selector: 'app-test-dialog',
  templateUrl: './test-dialog.component.html',
})
export class TestDialogComponent {

  constructor(public dialogRef: MatDialogRef<TestDialogComponent>,  @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }
}

app.Module

@NgModule({
  declarations: [
    AppComponent,
    TestDialogComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    BrowserAnimationsModule,
    MatDialogModule,
    AppRoutingModule,
    DemoMaterialModule,
  ],
  entryComponents: [TestDialogComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Source: New feed
Source Url App not showing dialog instead, my application shows the dialog as a component on my page