Angular 17中MatDialog无法渲染含注入数据的HTML标签问题

MatDialog可正常渲染弹窗组件，但弹窗内的文本完全空白。控制台输出显示已成功获取注入的数据，且相同代码在全新Angular项目中能正常运行，但当前项目里，不管是硬编码的静态文本（比如<h1>Hello World</h1>）还是绑定的动态数据（{{name}}）都无法显示。

已尝试以下方案但均无效：

• Angular 17已移除EntryComponents，无需配置该项
• 使用NgZone尝试触发变更检测
• 硬编码静态文本测试

弹窗组件HTML #

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<h1>Hello World</h1>
<h2>{{name}}</h2>

弹窗组件TS #

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

@Component({
  selector: 'app-pop-up-component',
  templateUrl: './pop-up-component.component.html',
  styleUrl: './pop-up-component.component.scss',
})
export class PopUpComponent {
  name: any;
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    this.name = data.name;
    console.log('popupcomponent ' + this.name);
  }

  ngOnInit() {
    console.log(this.name);
  }
}

主组件HTML #

<div class="row">
       <button class="btn" (click)="openDialog()">Open Dialog</button>
</div>

主组件TS #

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { DataService } from '../Services/data.service';
import { LoginServiceService } from '../Services/login-service.service';
import { MatDialog } from '@angular/material/dialog';
import { PopUpComponent } from '../pop-up-component/pop-up-component.component';

@Component({
  selector: 'app-main-component',
  templateUrl: './main-component.component.html',
  styleUrls: ['./main-component.component.scss'],
})
export class MainComponent implements OnInit {
  constructor(
    private login: LoginServiceService,
    private http: HttpClient,
    private dataService: DataService,
    private dialogRef: MatDialog,
  ) {}
openDialog() {
   this.dialogRef.open(PopUpComponent, {
    data: {
      name:'artist'
    }
   })
  }
}

恳请各位提供解决方案。

内容的提问来源于stack exchange，提问作者Shehban Patel