diff --git a/npm/ng-packs/packages/core/src/lib/services/lazy-load.service.ts b/npm/ng-packs/packages/core/src/lib/services/lazy-load.service.ts index a6e8eb1f5c..a9d1f53429 100644 --- a/npm/ng-packs/packages/core/src/lib/services/lazy-load.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/lazy-load.service.ts @@ -9,50 +9,66 @@ export class LazyLoadService { loadedLibraries: { [url: string]: ReplaySubject } = {}; load( - url: string, + urlOrUrls: string | string[], type: 'script' | 'style', content: string = '', targetQuery: string = 'body', position: InsertPosition = 'afterend', ): Observable { - if (!url && !content) return; - const key = url ? url.slice(url.lastIndexOf('/') + 1) : uuid(); - - if (this.loadedLibraries[key]) { - return this.loadedLibraries[key].asObservable(); + if (!urlOrUrls && !content) { + return; + } else if (!urlOrUrls && content) { + urlOrUrls = [null]; } - this.loadedLibraries[key] = new ReplaySubject(); - - let library; - if (type === 'script') { - library = document.createElement('script'); - library.type = 'text/javascript'; - if (url) { - (library as HTMLScriptElement).src = url; - } - - (library as HTMLScriptElement).text = content; - } else if (url) { - library = document.createElement('link'); - library.type = 'text/css'; - (library as HTMLLinkElement).rel = 'stylesheet'; - - if (url) { - (library as HTMLLinkElement).href = url; - } - } else { - library = document.createElement('style'); - (library as HTMLStyleElement).textContent = content; + if (!Array.isArray(urlOrUrls)) { + urlOrUrls = [urlOrUrls]; } - library.onload = () => { - this.loadedLibraries[key].next(); - this.loadedLibraries[key].complete(); - }; + return new Observable(subscriber => { + (urlOrUrls as string[]).forEach((url, index) => { + const key = url ? url.slice(url.lastIndexOf('/') + 1) : uuid(); + + if (this.loadedLibraries[key]) { + return this.loadedLibraries[key].asObservable(); + } + + this.loadedLibraries[key] = new ReplaySubject(); + + let library; + if (type === 'script') { + library = document.createElement('script'); + library.type = 'text/javascript'; + if (url) { + (library as HTMLScriptElement).src = url; + } + + (library as HTMLScriptElement).text = content; + } else if (url) { + library = document.createElement('link'); + library.type = 'text/css'; + (library as HTMLLinkElement).rel = 'stylesheet'; + + if (url) { + (library as HTMLLinkElement).href = url; + } + } else { + library = document.createElement('style'); + (library as HTMLStyleElement).textContent = content; + } + + library.onload = () => { + this.loadedLibraries[key].next(); + this.loadedLibraries[key].complete(); - document.querySelector(targetQuery).insertAdjacentElement(position, library); + if (index === urlOrUrls.length - 1) { + subscriber.next(); + subscriber.complete(); + } + }; - return this.loadedLibraries[key].asObservable(); + document.querySelector(targetQuery).insertAdjacentElement(position, library); + }); + }); } }