Designer not showing in Angular app

Problem Description

We have added the Designer into an Angular 19 project. We have managed to load up the designer and it is showing in the Angular application. However, it never loads up our designer. Here is our loading code in Angular.

ngAfterViewInit() {
setTimeout(() => {

		// Turn general support for data binding (templating) on or off. When set to false, this flag overrides showDataStructureToolbox and showSampleDataEditorToolbox.
		ACDesigner.GlobalSettings.enableDataBindingSupport= true;

		// Show or hide the "Data structure" toolbox. NOTE: the "Data structure" toolbox is currently non functional and will likely be removed in a future release
		ACDesigner.GlobalSettings.showDataStructureToolbox = false;

		// Show or hide the "Sample Data" toolbox.
		ACDesigner.GlobalSettings.showSampleDataEditorToolbox = true;

		// Show or hide the "Sample Host Data" toolbox.
		ACDesigner.GlobalSettings.showSampleHostDataEditorToolbox = true;

		// Show or hide the target version picker.
		ACDesigner.GlobalSettings.showVersionPicker = true;

		// Controls whether the target version should change according to the selected  host application. Each host application is associated with a maximum supported target version.
		ACDesigner.GlobalSettings.selectedHostContainerControlsTargetVersion = true;

		// Controls whether a warning message should be displayed when the selected target version is greater than the version supported by the selected host application. This warning is meant to inform the user that not all features they're designing their card with will work in the target host.
		ACDesigner.GlobalSettings.showTargetVersionMismatchWarning = true;

		/* Configure toolbox titles */
		ACDesigner.Strings.toolboxes.cardEditor.title = "Custom card editor title";
		ACDesigner.Strings.toolboxes.cardStructure.title = "Custom card structure title";
		ACDesigner.Strings.toolboxes.dataStructure.title = "Custom data structure title";
		ACDesigner.Strings.toolboxes.propertySheet.title = "Custom property sheet title";
		ACDesigner.Strings.toolboxes.sampleDataEditor.title = "Custom sample data editor title";

		ACDesigner.Strings.toolboxes.sampleHostDataEditor.title = "Custom sample host data editor title";
		ACDesigner.Strings.toolboxes.toolPalette.title = "Custom tool palette title";

		// Create a host container
		const hostContainer = new ACDesigner.TeamsContainer();

		// Initialize the Adaptive Card Designer
		this.designer = new ACDesigner.CardDesigner([hostContainer]);

		this.designer.setCard(JSON.parse(this.globalService.entity.Template));

		if (this.designerContainer?.nativeElement) {

			console.log(this.designer);
			console.log(this.designerContainer);


			this.designer.attachTo(this.designerContainer.nativeElement);
			
			//this.designer.monacoModuleLoaded();
		}
		
	}, 2500);
}

Card JSON

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Test"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
}

The editor loads but there is a "Loading editor..." being shown and it keeps showing the Matt Hidinger card and not the card we are passing in.

Screenshot

Start from the Angular ngAfterViewInit loading code, especially ACDesigner.CardDesigner, setCard, and attachTo, and reproduce the behavior with the supplied Adaptive Card JSON. Check why the editor remains on “Loading editor...” and displays the default Matt Hidinger card; done means the passed card loads in the Angular application.