feat(core): lazy load service supports url array

npm/ng-packs/packages/core/src/lib/services/lazy-load.service.ts

@@ -9,50 +9,66 @@ export class LazyLoadService {
   loadedLibraries: { [url: string]: ReplaySubject<void> } = {};
 
   load(
-    url: string,
+    urlOrUrls: string | string[],
     type: 'script' | 'style',
     content: string = '',
     targetQuery: string = 'body',
     position: InsertPosition = 'afterend',
   ): Observable<void> {
-    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);
+      });
+    });
   }
 }