Merge pull request #13 from marlongehringer/master

Update to Angular 8, Fix ViewChild

package.json

@@ -11,47 +11,46 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.1.0",
-    "@angular/cdk": "^7.2.0",
-    "@angular/common": "~7.1.0",
-    "@angular/compiler": "~7.1.0",
-    "@angular/core": "~7.1.0",
-    "@angular/flex-layout": "^7.0.0-beta.22",
-    "@angular/forms": "~7.1.0",
-    "@angular/platform-browser": "~7.1.0",
-    "@angular/platform-browser-dynamic": "~7.1.0",
-    "@angular/router": "~7.1.0",
+    "@angular/animations": "~8.2.4",
+    "@angular/cdk": "^8.1.4",
+    "@angular/common": "~8.2.4",
+    "@angular/compiler": "~8.2.4",
+    "@angular/core": "~8.2.4",
+    "@angular/flex-layout": "^8.0.0-beta.27",
+    "@angular/forms": "~8.2.4",
+    "@angular/platform-browser": "~8.2.4",
+    "@angular/platform-browser-dynamic": "~8.2.4",
+    "@angular/router": "~8.2.4",
     "@mralexandernickel/angular-intersection": "^0.3.0",
     "core-js": "^2.5.4",
     "coveralls": "^3.0.2",
     "intersection-observer": "^0.5.1",
-    "rxjs": "~6.3.3",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.8.26"
+    "rxjs": "~6.5.2",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.11.0",
-    "@angular-devkit/build-ng-packagr": "~0.11.0",
-    "@angular/cli": "~7.1.3",
-    "@angular/compiler-cli": "~7.1.0",
-    "@angular/language-service": "~7.1.0",
+    "@angular-devkit/build-angular": "^0.803.3",
+    "@angular-devkit/build-ng-packagr": "~0.803.2",
+    "@angular/cli": "~8.3.2",
+    "@angular/compiler-cli": "~8.2.4",
+    "@angular/language-service": "~8.2.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
-    "codelyzer": "~4.5.0",
+    "codelyzer": "~5.1.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~3.1.1",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "^4.2.0",
+    "ng-packagr": "^5.5.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
-    "tsickle": ">=0.29.0",
-    "tslib": "^1.9.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.1.6"
+    "tsickle": "0.37.0",
+    "tslint": "~5.19.0",
+    "typescript": "~3.5.3"
   }
 }

projects/ngx-picture/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@mralexandernickel/ngx-picture",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/common": "^7.1.0",
-    "@angular/core": "^7.1.0",
-    "@angular/cdk": "^7.2.0",
-    "@angular/flex-layout": "^7.0.0-beta.22",
+    "@angular/common": "~8.2.4",
+    "@angular/core": "~8.2.4",
+    "@angular/cdk": "^8.1.4",
+    "@angular/flex-layout": "^8.0.0-beta.27",
     "@mralexandernickel/angular-intersection": "^0.3.0"
   }
 }

projects/ngx-picture/src/lib/ngx-picture.component.spec.ts

@@ -114,7 +114,7 @@ describe('PictureComponent', () => {
       component,
       'subscribeBreakpoints'
     );
-    component.ngOnInit();
+    component.ngAfterViewInit();
     expect(spySubscribeBreakpoints).not.toHaveBeenCalled();
   });
 
@@ -280,4 +280,17 @@ describe('PictureComponent', () => {
     const initialImage = component.ngOnInit();
     expect(initialImage).toEqual(component.fallbackImage);
   });
+
+  it('should do nothing if platform is not a browser', () => {
+    const spyObserveIsBrowser: jasmine.Spy = spyOn(
+      component,
+      'isBrowser'
+    ).and.returnValue(false);
+    const subscribeBreakpointsSpy: jasmine.Spy = spyOn(
+      component,
+      'subscribeBreakpoints'
+    );
+    component.ngAfterViewInit();
+    expect(subscribeBreakpointsSpy).not.toHaveBeenCalled();
+  });
 });

projects/ngx-picture/src/lib/ngx-picture.component.ts

@@ -12,7 +12,8 @@ import {
   ViewChild,
   OnChanges,
   SimpleChanges,
-  PLATFORM_ID
+  PLATFORM_ID,
+  AfterViewInit
 } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { BreakpointObserver } from '@angular/cdk/layout';
@@ -35,7 +36,8 @@ export function isDataUri(img: HTMLImageElement): boolean {
   styleUrls: ['./ngx-picture.component.styl'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NgxPictureComponent implements OnInit, OnDestroy, OnChanges {
+export class NgxPictureComponent
+  implements OnInit, OnDestroy, OnChanges, AfterViewInit {
   @Input() public images: INgxPictureSet | string;
 
   @Input() public preload = true;
@@ -44,7 +46,7 @@ export class NgxPictureComponent implements OnInit, OnDestroy, OnChanges {
     boolean
   >();
 
-  @ViewChild('libEnterViewport')
+  @ViewChild('libEnterViewport', { static: false })
   public libEnterViewport: EnterViewportDirective;
 
   @Input() public fallbackImage: INgxImage;
@@ -241,6 +243,25 @@ export class NgxPictureComponent implements OnInit, OnDestroy, OnChanges {
     }
   }
 
+  /**
+   * We need to run this code inside AfterViewInit, because in OnInit we
+   * are setting/emitting the currentImage$ which is used inside the *ngIf
+   * inside the template, which itself is adding the ViewChild reference.
+   *
+   * So if currentImage$ hasn't emitted, the element in the template is not
+   * rendered and since Angular 8 the ViewChild then is also not available.
+   *
+   * This would throw an error inside subscribeBreakpoints as it is relying on
+   * this.libEnterViewport.
+   */
+  public ngAfterViewInit(): void {
+    if (this.isBrowser()) {
+      if (!this.isSingleSrc()) {
+        this.subscribeBreakpoints();
+      }
+    }
+  }
+
   public ngOnInit(): INgxImage {
     let initialImage = this.fallbackImage;
     if (!this.isBrowser()) {
@@ -250,10 +271,6 @@ export class NgxPictureComponent implements OnInit, OnDestroy, OnChanges {
       ) {
         initialImage = this.images[this.currentSize].hiRes;
       }
-    } else {
-      if (!this.isSingleSrc()) {
-        this.subscribeBreakpoints();
-      }
     }
     this.currentImage$ = new BehaviorSubject<INgxImage>(initialImage);