Plan for beeing supported by Server Side Rendering

[M2Key]

Is there any plan for make it compatible with SSR.

Once I actived SSR, I received :
NodeInvocationException: Prerendering failed because of error: ReferenceError: document is not defined

[Cordobo]

Hello @M2Key,

from my perspective it looks like a cool feature, I will have a look into it.
Please feel free to provide sample code.

[cslgxuchang]

I have the same question，But my project use angular@4.0, I can't update to angular@5.0 . are you able to provide any methods to resolve it?

[Cordobo]

@cslgxuchang

Please provide some sample-code for me on a plunkr or jsfiddle.

[cslgxuchang]

@Cordobo use angularx-qrcode@1.0.2, my project use angular@4.0.0, when I run it with ssr, error "document is not defined" in angularx-qrcode@1.0.2 module . I have no idea to resolve it.

[cbernth]

These few changes makes SSR work for me:

angularx-qrcode.component.ts:

import {
	ChangeDetectionStrategy,
	Component,
	ElementRef,
	Input,
	OnChanges,
	OnInit,
	SimpleChange,
	AfterViewInit,
	Inject,
	PLATFORM_ID
} from '@angular/core';

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, AfterViewInit {

	/** @internal */
	@Input() public allowEmptyString: boolean = false;
	@Input() public colordark: string = '#000000';
	@Input() public colorlight: string = '#ffffff';
	@Input() public level: string = 'M';
	@Input() public hidetitle: boolean = false;
	@Input() public qrdata: string = '';
	@Input() public size: number = 256;
	@Input() public usesvg: boolean = false;

	public qrcode: any;

	constructor(
		public el: ElementRef,
		@Inject(PLATFORM_ID) private platformId: Object,
	) { }

	public ngOnInit() {
	}

	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);
			}
		}
	}

	public ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
		if (!this.qrcode) {
			return;
		}

		const qrData = changes['qrdata'];

		if (qrData && this.isValidQrCodeText(qrData.currentValue)) {
			this.qrcode.clear();
			this.qrcode.makeCode(qrData.currentValue);
		}
	}

	protected isValidQrCodeText = (data: string): boolean => {
		if (this.allowEmptyString === false) {
			return !(typeof data === 'undefined' || data === '');
		}
		return !(typeof data === 'undefined');
	}

}

The main point is to not init QRCode when running server side, so I changed the import 'qrcodejs2' to a require being applied in ngAfterViewInit.

Since the code in ngOnInit now depends on ngAfterViewInit, I simply moved the code to that method, where we also know if QRCode is properly initialized.

[taoyouh]

Maybe a pull request and a new release on NPM?

[Vulkh88]

Hi, I have installed two versions of this package (^1.2.4 and ^1.5.3) in differents proyects, but i´dont see if the code of @cbernth is all ready implemented, is that so in what version of the package can i see this code, please?

[Cordobo]

Hi @Dyabel03

No, the code from @cbernth has not been integrated into the repo yet.

[Vulkh88]

Hi, @Cordobo thank you for your answer, currently I need this in my work so, do you have any plan to implement this anytime soon?... I really appreciate your effort in this project and I don´t wanna sound rude...thank you in advance.

P.S: Or if you know how I can implement this would also be helpful, I tried to use the code of @cbernth but when I execute the universal angular the same error occurs.

[aldiiii]

i need too for my work so, please could you help us to fix it for angular universal.
still same error when execute 😢

[Cordobo]

@Dyabel03 @alchemistt99 PRs are more than welcome!