Unable to open a modal from within my teams application

I am create a teams application and is built using angular using the MDBootstrap packages. The application itself is hosted using AWS cloudfront.

Now the issue I am having is when I open a modal from within the application in teams I get the following error in the console:

Blocked a frame with origin "https://prod.code.myurl.com" from accessing a frame with origin "https://teams.microsoft.com". Protocols, domains, and ports must match.

Note when the modal is opened I am not even calling any external api or anything.

This is how I am opening the modal:

public openModal(formFileName: any) {
const config = {
modalClass: 'modal-xl',
ignoreBackdropClick: true,
animation: false,
data: {
title: 'FormLoader'
},
}
let modalRef = this.modalService.open(FormLoaderModalComponent, config);
modalRef.onClose.subscribe(async (message: any) => {
console.log('Modal closed');
});
}
}


and this is the FormLoaderModalComponent:

import {Component} from '@angular/core';
import {MdbModalRef} from "mdb-angular-ui-kit/modal";

@Component({
selector: 'app-form-loader-modal',
templateUrl: './form-loader-modal.component.html',
styleUrl: './form-loader-modal.component.scss'
})
export class FormLoaderModalComponent {
title: string | null = null;
formFileName: string | null = null;

constructor(public modalRef: MdbModalRef<FormLoaderModalComponent>) {
}
}



---
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ title }}</h5>
<button
type="button"
class="btn-close"
aria-label="Close"
(click)="modalRef.close()"
></button>
</div>
<div class="modal-body">

</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="modalRef.close()">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>






so very basic but get the error.

Wondering what I might be doing wrong and how to fix the issue.

Thanks

Continue reading...