Fix isServer qrcomponent. Added code from https://github.com/Cordobo/…

…angularx-qrcode/issues/5\#issuecomment-396715508

dist/components/angularx-qrcode/angularx-qrcode.component.d.ts

@@ -1,6 +1,7 @@
-import { ElementRef, OnChanges, OnInit, SimpleChange } from '@angular/core';
-export declare class QRCodeComponent implements OnChanges, OnInit {
+import { ElementRef, OnChanges, OnInit, SimpleChange, AfterViewInit } from '@angular/core';
+export declare class QRCodeComponent implements OnChanges, OnInit, AfterViewInit {
     el: ElementRef;
+    private platformId;
     colordark: string;
     colorlight: string;
     level: string;
@@ -9,8 +10,9 @@ export declare class QRCodeComponent implements OnChanges, OnInit {
     size: number;
     usesvg: boolean;
     qrcode: any;
-    constructor(el: ElementRef);
+    constructor(el: ElementRef, platformId: Object);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnChanges(changes: {
         [propertyName: string]: SimpleChange;
     }): void;

dist/components/angularx-qrcode/angularx-qrcode.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"QRCodeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"qrcode","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":14,"character":19},"member":"OnPush"},"template":""}]}],"members":{"allowEmptyString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"colordark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"colorlight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"level":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"hidetitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"qrdata":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"usesvg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":33,"character":15}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"QRCodeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"qrcode","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":20,"character":19},"member":"OnPush"},"template":""}]}],"members":{"allowEmptyString":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"colordark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"colorlight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"level":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"hidetitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"qrdata":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"usesvg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":40,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":40,"character":12}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":39,"character":15},{"__symbolic":"reference","name":"Object"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]

package.json

@@ -96,4 +96,4 @@
     "webpack-rxjs-externals": "^1.0.0",
     "zone.js": "^0.8.26"
   }
-}
+}

src/components/angularx-qrcode/angularx-qrcode.component.ts

@@ -5,18 +5,24 @@ import {
   Input,
   OnChanges,
   OnInit,
-  SimpleChange
+  SimpleChange,
+  AfterViewInit,
+  Inject,
+  PLATFORM_ID
 } from '@angular/core';
 
-import * as QRCode from 'qrcodejs2';
+declare var require: any;
+var QRCode: any = undefined;
+
+import { isPlatformServer } from '@angular/common';
 
 @Component({
   selector: 'qrcode',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: ''
 })
 
-export class QRCodeComponent implements OnChanges, OnInit {
+export class QRCodeComponent implements OnChanges, OnInit, AfterViewInit {
 
   /** @internal */
   @Input() public allowEmptyString: boolean = false;
@@ -31,26 +37,38 @@ export class QRCodeComponent implements OnChanges, OnInit {
   public qrcode: any;
 
   constructor(
-    public el: ElementRef
+    public el: ElementRef,
+    @Inject(PLATFORM_ID) private platformId: Object,
   ) { }
 
   public ngOnInit() {
-    try {
-      if (!this.isValidQrCodeText(this.qrdata)) {
-        throw new Error('Empty QR Code data');
+  }
+
+  public ngAfterViewInit() {
+    if (isPlatformServer(this.platformId)) {
+      return;
+    }
+    else {
+      if (!QRCode) {
+        QRCode = require('qrcodejs2');
       }
+      try {
+        if (!this.isValidQrCodeText(this.qrdata)) {
+          throw new Error('Empty QR Code data');
+        }
 
-      this.qrcode = new QRCode(this.el.nativeElement, {
-        colorDark: this.colordark,
-        colorLight: this.colorlight,
-        correctLevel: QRCode.CorrectLevel[this.level.toString()],
-        height: this.size,
-        text: this.qrdata || ' ',
-        useSVG: this.usesvg,
-        width: this.size,
-      });
-    } catch (e) {
-      console.error('Error generating QR Code: ' + e.message);
+        this.qrcode = new QRCode(this.el.nativeElement, {
+          colorDark: this.colordark,
+          colorLight: this.colorlight,
+          correctLevel: QRCode.CorrectLevel[this.level.toString()],
+          height: this.size,
+          text: this.qrdata || ' ',
+          useSVG: this.usesvg,
+          width: this.size,
+        });
+      } catch (e) {
+        console.error('Error generating QR Code: ' + e.message);
+      }
     }
   }