使用 tableau-viz webcomponent 在 angular 14 中嵌入 Tableau 不起作用

问：

tableau-viz 在 Angular 中显示为不是已知元素，即使在添加 index.html 后也是如此。<script type="module">

如何在angular中嵌入tableau cloud pod URL？

<script type='module' src='https://10az.online.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js'></script>
<tableau-viz id='tableau-viz' src='https://10az.online.tableau.com/t/company/views/viewname?:embed=yes&:toolbar=no' width='1472' height='889' toolbar='bottom' ></tableau-viz>

在 angular 中尝试了以下代码

@ViewChild("vizContainer") containerDiv: ElementRef;

  ngAfterViewInit() {
    this.initTableau();
  }

  initTableau() {
    // const containerDiv = document.getElementById("vizContainer");
    const vizUrl =
      https://10az.online.tableau.com/t/company/views/viewname?:embed=yes&:toolbar=no;

    const options = {
      hideTabs: true,
      onFirstInteractive: () => {
        console.log("onFirstInteractive");
      },
      onFirstVizSizeKnown: () => {
        console.log("onFirstVizSizeKnown");
      }
    };

    this.viz = new tableau.Viz(
      this.containerDiv.nativeElement,
      vizUrl,
      options
    );

我期望 tableau-viz 在 html 和 tableau 云 url 上方被重新识别为 webcomponent 以提示登录