Initially, when an iframe is loaded in Angular 10, it may display a 404 error page

Hey there! I'm currently using the HTML code below to incorporate an iframe and display an external page hosted on the same domain so no need to worry about cross domain issues:

<iframe frameborder="0" [src]="url"></iframe>

Additionally, I have implemented the following TypeScript code to sanitize and load the content:

this.url = this.sanitizer.bypassSecurityTrustResourceUrl("/assets/static/page.html");

The issue I am facing is quite strange - after the page loads, the iframe initially shows a 404 error for a brief moment in localhost and for 2 to 3 seconds in production. It then proceeds to display the actual page content. This can be quite frustrating since Angular lacks proper support for iframe events such as page load or failure.

angulartypescriptiframeangular10

Answer №1

It seems like the issue may be that you are setting the URL after the iframe has already been rendered. One possible solution is to add an *ngIf="url" directive to the iframe in order to delay its rendering until the URL has been properly set. Another option would be to ensure that the URL is set before the iframe is actually rendered. If these suggestions do not resolve the problem, could you kindly share the code of your component for further assistance?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Oops! The react-social-media-embed encountered a TypeError because it tried to extend a value that is either undefined, not a

I recently attempted to incorporate the "react-social-media-embed" package into my Next.js project using TypeScript. Here's what I did: npm i react-social-media-embed Here is a snippet from my page.tsx: import { InstagramEmbed } from 'react-soc ...

javascriptreactjstypescriptnext.js

Tests in Angular2 are executed before the variables in compileComponents are initialized

I'm encountering an issue with an Angular2 text component where I receive the following error message when trying to run the testrunner: Component: Product Component Should ensure component subscribes to service EventEmitter on instantiation Failed: ...

angulartestingkarma-runner

Encountering a fresh issue after updating to TS version 4.4.3 while accessing properties of the top "Object may be 'null'."

After upgrading my project to TypeScript 4.4.3 from 3.9.9, I encountered a change in the type declarations for the top property. My project utilizes "strictNullChecks": true, in its configuration file tsconfig.json, and is browser-based rather t ...

javascripttypescript

Encountering Error: Unable to create new component as PriorityQueue is not recognized as a constructor

While trying to create a new component using Angular CLI with the command ng g c navbar, I encountered an unusual error message: core_1.PriorityQueue is not a constructor TypeError: core_1.PriorityQueue is not a constructor at new TaskScheduler (/h ...

angularnpmangular-cli

Implementing a map display feature in Angular using search results

I need assistance with displaying a map in an Angular 2 application. I also want to be able to highlight specific locations or areas based on certain data points. For example: 1. Showing voting results on the map by highlighting different colored areas. ...

angular

The compatibility between `webpack-streams` and `@types/webpack`

I encountered an issue with my gulpfile while building it with TypeScript. Everything was working fine until I included @types/webpack-stream. Suddenly, I started getting a series of errors that looked quite ugly: node_modules/@types/webpack-stream/index.d ...

typescriptwebpackwebpack-stream

Error: npm encountered a loop error while attempting to download

Looking to implement Google login, I attempted the following command: npm install --save angularx-social-login. Unfortunately, it returned an error: D:\proj>npm install --save angularx-social-login npm ERR! code ELOOP npm ERR! syscall open npm ERR ...

angular

Angular is a powerful framework that enables the creation of dynamic user interfaces. One of its many

Looking to implement a Material table with expandable rows in Angular. table-tree.html <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8" > <ng-container matColumnDef="{{co ...

angulartypescriptangular-material

What steps should I take to resolve the 'invalid mime type' issue while transmitting an image as a binary string to Stability AI via Express?

Currently, I am facing an issue while attempting to utilize the image-to-image API provided by stabilityAI. The task at hand involves sending an image as a binary string through my express server to the stability AI API. However, when I make the POST reque ...

node.jsangulartypescriptstability

Angular Material calendar tool customization for designated input

Is it possible to individually control the format of input for a datepicker without affecting the format for the entire module? <input matInput [matDatepicker]="dp" [formControl]="date" [format]="'DD/MM/YYYY'"> <-- Can this be done? < ...

angulardatepickerangular-materialangular-material-datetimepicker

Tips for assigning the 'store_id' value to a variable in Angular 6 within the Ionic4 environment

Trying to retrieve the store_id from the StorageService in Ionic4 (angular 6). Managed to retrieve the store_id using: let id = this.storageService.get('store_id'); id.then(data => { this.store.push(data) }); After pushing it into an ar ...

angularionic4

Guidance on transferring information from a parent component to an Angular Material table child component

Currently, I am implementing an angular material table with sorting functionality. You can view the example here: Table Sorting Example I intend to transform this into a reusable component so that in the parent component, all I have to do is pass the colu ...

angulartypescriptangular-materialangular-material-table

Flashing issues when utilizing the Jquery ui slider within an Angular 2 component

I recently incorporated a jquery-ui slider plugin into an angular 2 component and it's been working well overall, but I have encountered an annoying issue. Whenever the slider is used, there is a flickering effect on the screen. Interestingly, when I ...

csshtmljquery-uitypescriptangular

Update a BehaviourSubject's value using an Observable

Exploring options for improving this code: This is currently how I handle the observable data: this.observable$.pipe(take(1)).subscribe((observableValue) => { this.behaviourSubject$.next(observableValue); }); When I say improve, I mean finding a wa ...

javascriptangulartypescriptrxjs

Need to import a JSON file and convert it to an interface in order to ensure that all fields are included

I am facing an issue where I am attempting to parse a json file using require(). My goal is to convert it into a specific data type and have the conversion fail if the file does not contain all the necessary fields as defined by the interface. Below is my ...

typescript

Issues with style not loading properly within innerHTML in Angular2

Currently, I am in the process of developing a page using Angular2/4 that includes a left navigation bar. To achieve reusability, I have separated this left menu into its own component and nested it within the main component. The objective is to utilize th ...

htmlangulartypescriptrenderer

Expanding the global object in ES6 modules to include TypeScript support for extensions like `Autodesk.Viewing.Extension`

I created a custom forge extension and now I am looking to incorporate typescript support as outlined in this blog post. However, I am facing an issue where typescript cannot locate the objects like Autodesk.Viewing.Extension and Autodesk.Viewing.ToolInter ...

typescriptautodesk-forgeautodesk-viewer

I want to know the best way to send latitude and longitude coordinates from an external source in order to generate a

Looking for advice on customizing a working code that uses leaflet angular to place markers with predefined latitudes and longitudes. I want to be able to customize this by passing latitudes and longitudes when the addmarker button is pr ...

angulartypescriptleafletgisngx-leaflet

Changing the title dynamically for the Global NavBar in Ionic 2

I have been working with the Nav component in Ionic 2 and I'm facing a challenge. I want to maintain a global header with left and right menus while changing the title dynamically as I navigate through different root pages. Here is the code snippet th ...

angularionic2

Mapping nested values from a Typescript object to properties of a JSON object

Within the scope of a current project I am involved in, we have opted for utilizing the Angular toolset identified as formly to dynamically generate our forms. The present configuration of the form is hardcoded into a Typescript object denoted as mockForm ...

javascriptjsontypescriptobjectnested-object