Why do I get compilation errors when trying to use Angular elements in a Material Dialog?

Question

I have tried to create a very basic instance of an Angular application with a Material Dialog, but when I try to incorporate anything "Angular" in the HTML of the dialog (such as using <mat-dialog-content> or [(ngInput)]), it fails to compile.

In the case of using <mat-dialog-content>:

error NG8001: 'mat-dialog-content' is not a known element:

(then stuff about verifying that it is part of the module)

While for [(ngInput)] I get:

src/app/dialog-test/dialog-content-example-dialog.html:15:17 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

The full code is at https://github.com/benoleary/mat-dialog-frustration

I know that I am importing things correctly to be used anywhere except within the dialog (e.g. in that demo, the main app page has the same input element and it works). I presume that there is something with the imports and exports that is missing but I have not been able to identify it. There seem to be many questions already which are answered with "you forgot to import MatDialogModule in app.module.ts" but I definitely am importing it in app.module.ts. (I did find a question which seems to be the same as mine but I cannot see any answers and honestly I am a little suspicious of "solveforum": https://solveforum.com/forums/threads/solved-angular-material-mat-dialog-content-is-not-a-known-element.34667/#)

I have deleted my node_modules and re-run npm install innumerable times.

Tried on both Debian 10 with node v18.2.0 and npm 8.9.0 and on Windows Server 2019 also with node node v18.2.0 and npm 8.9.0

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';

import { DialogContentExample } from './dialog-test/dialog-test.component';


@NgModule({
  declarations: [
    AppComponent,
    DialogContentExample
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    MatDialogModule
  ],
  exports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    MatDialogModule,
    DialogContentExample
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

dialog-test.component.ts:

import { Component } from '@angular/core';
import { MatDialog }  from '@angular/material/dialog';

import { FormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';

/**
 * @title Dialog with header, scrollable content and actions
 */
@Component({
  selector: 'dialog-content-example',
  templateUrl: 'dialog-content-example.html',
})
export class DialogContentExample {
  pageInput = 'initialized';

  constructor(public dialog: MatDialog) {}

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

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

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'dialog-content-example-dialog.html',
})
export class DialogContentExampleDialog {
  dialogInput: string = "blah";
}

dialog-content-example-dialog.html:

<h2 mat-dialog-title>A Title</h2>

<p>
  A paragraph
  dialogInput = {{this.dialogInput}}
</p>

<!--
  Uncommenting the mat-dialog-content element below causes the following error:
  error NG8001: 'mat-dialog-content' is not a known element:

  while uncommenting the input element causes:
  error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

 <input matInput [(ngModel)]="dialogInput">
                 ~~~~~~~~~~~~~~~~~~~~~~~~~
-->
<!--
<mat-dialog-content>Some content</mat-dialog-content>
-->
<!--
<input matInput [(ngModel)]="dialogInput">
-->

package.json:

{
  "name": "mat-dialog-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/cdk": "^13.3.8",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/material": "^13.3.8",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@material/dialog": "^14.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.5",
    "@angular/cli": "~13.3.5",
    "@angular/compiler-cli": "~13.3.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.6.2"
  }
}

Answer 1

This is not a perfect answer as it does not actually state what the problem was, but at least thanks to Nathaniel Johnson in the comments, I was able to get my dialogs working by doing making my own copy of material.module.ts from https://stackblitz.com/edit/angular-7rp2tf?file=src%2Fapp%2Fdialog-content-example.ts in my src/ folder and importing that in app.module.ts.

If anyone can post a more satisfactory answer about what I was doing wrong and why, I will accept that. Until then, at least there is a way forward in case anyone else has the same problem.