Create window service instead of using injection

This will make AOT works on angular-cli Fix #13
themyth92 · Jun 13, 2017 · 9fa1895 · 9fa1895
1 parent 335177d
commit 9fa1895
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/src/lightbox-event.service.ts b/src/lightbox-event.service.ts
@@ -32,3 +32,14 @@ export class LightboxEvent {
     this._lightboxEventSource.next(event);
   }
 }
+
+function getWindow (): any {
+  return window;
+}
+
+@Injectable()
+export class LightboxWindowRef {
+  get nativeWindow (): any {
+    return getWindow();
+  }
+}
diff --git a/src/lightbox.component.spec.ts b/src/lightbox.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, fakeAsync, inject, tick } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
-import { LightboxEvent, LIGHTBOX_EVENT } from './lightbox-event.service';
+import { LightboxEvent, LightboxWindowRef, LIGHTBOX_EVENT } from './lightbox-event.service';
 import { LightboxComponent } from './lightbox.component';
 
 describe('[ Unit - LightboxComponent ]', () => {
@@ -36,10 +36,7 @@ describe('[ Unit - LightboxComponent ]', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ LightboxComponent ],
-      providers: [
-        LightboxEvent,
-        { provide: 'Window', useValue: window }
-      ]
+      providers: [ LightboxEvent, LightboxWindowRef ]
     });
     createComponent();
   });

diff --git a/src/lightbox.component.ts b/src/lightbox.component.ts
@@ -11,7 +11,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
-import { LightboxEvent, LIGHTBOX_EVENT, IAlbum, IEvent } from './lightbox-event.service';
+import { LightboxEvent, LIGHTBOX_EVENT, IAlbum, IEvent, LightboxWindowRef } from './lightbox-event.service';
 import { Subscription } from 'rxjs/Subscription';
 
 @Component({
@@ -63,18 +63,20 @@ export class LightboxComponent implements AfterViewInit, OnDestroy {
   public ui: any;
   private _cssValue: any;
   private _event: any;
+  private _windowRef: any;
   constructor(
     private _elemRef: ElementRef,
     private _rendererRef: Renderer,
     private _lightboxEvent: LightboxEvent,
     public _lightboxElem: ElementRef,
-    @Inject('Window') private _windowRef: any,
+    private _lightboxWindowRef: LightboxWindowRef,
     @Inject(DOCUMENT) private _documentRef: any
   ) {
     // initialize data
     this.options = this.options || {};
     this.album = this.album || [];
     this.currentImageIndex = this.currentImageIndex || null;
+    this._windowRef = this._lightboxWindowRef.nativeWindow;
 
     // control the interactive of the directive
     this.ui = {

diff --git a/src/lightbox.module.ts b/src/lightbox.module.ts
@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { Lightbox } from './lightbox.service';
 import { LightboxComponent } from './lightbox.component';
 import { LightboxConfig } from './lightbox-config.service';
-import { LightboxEvent } from './lightbox-event.service';
+import { LightboxEvent, LightboxWindowRef } from './lightbox-event.service';
 import { LightboxOverlayComponent } from './lightbox-overlay.component';
 import { NgModule } from '@angular/core';
 
@@ -12,7 +12,7 @@ import { NgModule } from '@angular/core';
     Lightbox,
     LightboxConfig,
     LightboxEvent,
-    { provide: 'Window', useValue: window }
+    LightboxWindowRef
   ],
   entryComponents: [ LightboxOverlayComponent, LightboxComponent ]
 })