core.mjs:11860 ERROR TypeError: Cannot read properties of null (reading 'postMessage')
    at recurly.js:2:6789
    at Array.forEach (<anonymous>)
    at s.value (recurly.js:2:6766)
    at i.value (recurly.js:2:15668)
    at i.value (recurly.js:2:16227)
    at i.<anonymous> (recurly.js:2:11234)
    at e.emit (recurly.js:2:146300)
    at recurly.js:2:6885
    at Array.forEach (<anonymous>)
    at s.value (recurly.js:2:6766)

<mat-tab-group>
  <mat-tab label="Default">
    <h3>Default</h3>
  </mat-tab>
  <mat-tab label="Subscription">
    <div>
      <h3>Subscription</h3>
    
      <input type="text" data-recurly="first_name">
      <input type="text" data-recurly="last_name">
    
      <div #recurlyElements>
        <!-- Recurly Elements will be attached here -->
      </div>
    
      <!-- Recurly.js will update this field automatically -->
      <input type="hidden" name="recurly-token" data-recurly="token">
    
      <button>submit</button>
    </div>
  </mat-tab>
</mat-tab-group>

import { CommonModule } from '@angular/common';
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { RecurlyOptions } from '@recurly/recurly-js'
import { MatTabsModule } from '@angular/material/tabs'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, MatTabsModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit, AfterViewInit {
  title = 'recurly_test';

  @ViewChild('recurlyElements')
  recurlyElements? : ElementRef;

  ngOnInit() {
    recurly.configure({publicKey: 'REDACTED'} as RecurlyOptions);
  }

  ngAfterViewInit(): void {
    const elements = recurly.Elements();
    const cardElement = elements.CardElement();
    cardElement.attach(this.recurlyElements?.nativeElement);
  }
}