Angular IFrame Error: Refused to apply style from because its MIME type ('text/html') is not a supported stylesheet MIME type

Hi,

I have an iframe that is dynamic so I want to put the src as one of my variables which is changed based on records. i have done the following:

in my html I have:

<iframe #iframe
     width="850" height="530" style="border:0;" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>

and in ts:

@ViewChild('iframe') iframe: ElementRef
  ngAfterViewInit() {
    this.iframe.nativeElement.setAttribute('src', this.property.mapLink);
}

I am getting errors:

Refused to apply style from 'http://localhost:4200/www.google.com/maps/assets/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. embed:1 Refused to apply style from 'http://localhost:4200/www.google.com/maps/assets/carouselstyle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. embed:6 GET http://localhost:4200/www.google.com/maps/assets/bootstrap.bundle.min.js net::ERR_ABORTED 404 (Not Found) embed:1 Refused to execute script from 'http://localhost:4200/www.google.com/maps/assets/bootstrap.bundle.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. embed:23 Refused to apply style from 'http://localhost:4200/Frontend/src/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.