Embed Tableau in angular 14 using tableau-viz webcomponent not working

Question

tableau-viz is showing as not a known element in angular even after adding <script type="module"> in index.html.

How to embed tableau cloud pod URL in angular?

<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>

Tried below code in 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
    );

I was expecting tableau-viz to be recoginzed as webcomponent in html and above tableau cloud url to prompt login