feat(lib): add support for urls with type module

Author: tomastrajan

projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.spec.ts

@@ -26,16 +26,22 @@ import { LazyElementDirective } from './lazy-element.directive';
         *axLazyElement="'http://elements.com/some-element'; loading: loading"
       ></some-element>
     </div>
+    <div *ngIf="useModule">
+      <some-element
+        *axLazyElement="'http://elements.com/some-element-module'; module: true"
+      ></some-element>
+    </div>
   `
 })
 class TestHostComponent {
   addSameElement = false;
   addOtherElement = false;
   useLoadingTemplate = false;
+  useModule = false;
 }
 
 describe('LazyElementDirective', () => {
-  let component: TestHostComponent;
+  let testHostComponent: TestHostComponent;
   let fixture: ComponentFixture<TestHostComponent>;
   let appendChildSpy: jasmine.Spy;
 
@@ -48,13 +54,13 @@ describe('LazyElementDirective', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TestHostComponent);
-    component = fixture.componentInstance;
+    testHostComponent = fixture.componentInstance;
     appendChildSpy = spyOn(document.body, 'appendChild').and.stub();
     fixture.detectChanges();
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    expect(testHostComponent).toBeTruthy();
   });
 
   it('adds a script tag into dom to load element bundle', () => {
@@ -65,7 +71,7 @@ describe('LazyElementDirective', () => {
   });
 
   it('adds a script tag only once for elements with same url', () => {
-    component.addSameElement = true;
+    testHostComponent.addSameElement = true;
     fixture.detectChanges();
 
     expect(appendChildSpy).toHaveBeenCalledTimes(1);
@@ -75,7 +81,7 @@ describe('LazyElementDirective', () => {
   });
 
   it('adds multiple script tags if elements have different bundle url', () => {
-    component.addOtherElement = true;
+    testHostComponent.addOtherElement = true;
     fixture.detectChanges();
 
     expect(appendChildSpy).toHaveBeenCalledTimes(2);
@@ -90,7 +96,7 @@ describe('LazyElementDirective', () => {
   it('renders loading template', () => {
     expect(document.querySelector('.loading')).toBe(null);
 
-    component.useLoadingTemplate = true;
+    testHostComponent.useLoadingTemplate = true;
     fixture.detectChanges();
 
     expect(document.querySelector('.loading').textContent).toBe('Loading...');
@@ -99,7 +105,7 @@ describe('LazyElementDirective', () => {
   it('removes loading template when element is loaded', done => {
     expect(document.querySelector('.loading')).toBe(null);
 
-    component.useLoadingTemplate = true;
+    testHostComponent.useLoadingTemplate = true;
     fixture.detectChanges();
 
     expect(document.querySelector('.loading').textContent).toBe('Loading...');
@@ -113,4 +119,23 @@ describe('LazyElementDirective', () => {
       done();
     });
   });
+
+  it('uses type module on script tag when specified', () => {
+    fixture.detectChanges();
+
+    expect(appendChildSpy).toHaveBeenCalledTimes(1);
+    expect(appendChildSpy.calls.argsFor(0)[0].src).toBe(
+      'http://elements.com/some-element'
+    );
+    expect(appendChildSpy.calls.argsFor(0)[0].type).toBe('');
+
+    testHostComponent.useModule = true;
+    fixture.detectChanges();
+
+    expect(appendChildSpy).toHaveBeenCalledTimes(2);
+    expect(appendChildSpy.calls.argsFor(1)[0].src).toBe(
+      'http://elements.com/some-element-module'
+    );
+    expect(appendChildSpy.calls.argsFor(1)[0].type).toBe('module');
+  });
 });

projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts

@@ -14,6 +14,7 @@ import { LazyElementsLoaderService } from '../lazy-elements-loader.service';
 export class LazyElementDirective implements OnInit {
   @Input('axLazyElement') url: string;
   @Input('axLazyElementLoading') loadingTemplateRef: TemplateRef<any>; // tslint:disable-line:no-input-rename
+  @Input('axLazyElementModule') isModule: boolean; // tslint:disable-line:no-input-rename
 
   constructor(
     private vcr: ViewContainerRef,
@@ -29,9 +30,11 @@ export class LazyElementDirective implements OnInit {
       this.vcr.createEmbeddedView(this.loadingTemplateRef);
     }
 
-    this.elementsLoaderService.loadElement(this.url, elementTag).then(() => {
-      this.vcr.clear();
-      this.vcr.createEmbeddedView(this.template);
-    });
+    this.elementsLoaderService
+      .loadElement(this.url, elementTag, this.isModule)
+      .then(() => {
+        this.vcr.clear();
+        this.vcr.createEmbeddedView(this.template);
+      });
   }
 }

projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.spec.ts

@@ -80,4 +80,28 @@ describe('LazyElementsLoaderService', () => {
       done();
     });
   });
+
+  it('adds a script tag without module type', () => {
+    service.loadElement('http://elements.com/some-element', 'some-element');
+
+    expect(appendChildSpy).toHaveBeenCalledTimes(1);
+    expect(appendChildSpy.calls.argsFor(0)[0].src).toBe(
+      'http://elements.com/some-element'
+    );
+    expect(appendChildSpy.calls.argsFor(0)[0].type).toBe('');
+  });
+
+  it('adds a script tag with module type', () => {
+    service.loadElement(
+      'http://elements.com/some-element',
+      'some-element',
+      true
+    );
+
+    expect(appendChildSpy).toHaveBeenCalledTimes(1);
+    expect(appendChildSpy.calls.argsFor(0)[0].src).toBe(
+      'http://elements.com/some-element'
+    );
+    expect(appendChildSpy.calls.argsFor(0)[0].type).toBe('module');
+  });
 });

projects/elements/src/lib/lazy-elements/lazy-elements-loader.service.ts

@@ -10,7 +10,11 @@ export class LazyElementsLoaderService {
 
   constructor() {}
 
-  loadElement(url: string, tag: string): Promise<void> {
+  loadElement(
+    url: string,
+    tag: string,
+    isModule: boolean = false
+  ): Promise<void> {
     if (!url) {
       throw new Error(`${LOG_PREFIX} - url for <${tag}> not found`);
     }
@@ -24,6 +28,9 @@ export class LazyElementsLoaderService {
     if (!this.hasElement(url)) {
       const notifier = this.addElement(url);
       const script = document.createElement('script') as HTMLScriptElement;
+      if (isModule) {
+        script.type = 'module';
+      }
       script.src = url;
       script.onload = notifier;
       document.body.appendChild(script);