In an attempt to create an iframe-like solution, I am using an http.get call to retrieve a site as an object containing HTML and CSS. The issue arises when using <link> tags because the CSS path is obtained from an external source, causing the HTML to load before all the CSS is applied.
Even though I thought that
link.onload = () => { sub$.next(); sub$.complete() }Html$ = this._idToGetUrl.pipe(
filter(id=> id!= null),
switchMap(id => {
return this.http.get<any>(this.baseUrl(id))
.pipe(
switchMap(x => this.setLinkTags(x.css)
.pipe(map(_ => x.html))
),
catchError(this.handleError)
);
})
)
private setLinkTags = (css: CSS[]) => {
const check = css.map((css, i) => {
const sub$ = new Subject()
if (document.querySelector(`[href="${css.path}"]`)) {
sub$.next()
sub$.complete()
return sub$
}
const link = document.createElement('link')
link.setAttribute("rel", "stylesheet")
link.setAttribute("type", "text/css")
link.onload = () => { sub$.next(); sub$.complete() }
link.onerror = () => { sub$.next(); sub$.complete() }
link.setAttribute("href", css.path)
document.getElementsByTagName("head")[0].appendChild(link)
return sub$
})
return zip(of(...check))
}