Comments (20)
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.
from angularx-qrcode.
Thanks to code contributed by @cbernth and @ZhenhangTung, as of version 1.6.0, angularx-qrcode has fully implemented SSR support.
Closing this (please open another issue, if you encounter any)
from angularx-qrcode.
/frontend/dist/server.js:226874
var useSVG = document.documentElement.tagName.toLowerCase() === "svg";
^
ReferenceError: document is not defined
not working in 1.5.3
from angularx-qrcode.
I got
var useSVG = document.documentElement.tagName.toLowerCase() === "svg";
^
ReferenceError: document is not defined
version 1.6.1 and version 1.6.0
from angularx-qrcode.
@Cordobo Same thing happened to me. Here is my PR, but I don't know why my changes don't exist anymore on the dev branch, which has cost me several hours to find out the true problem. If you look at my company's fork, you will see the:
This branch is 4 commits ahead, 4 commits behind Cordobo:master.
On your master branch, my changes still don't exist.
Hope you could fix the problem soon. I'll just use the forked version for now.
from angularx-qrcode.
@ZhenhangTung I have reapplied the PRs and released a fixed version 1.6.4. Thanks for your feedback!
from angularx-qrcode.
Is it possible to generate the QR code from a component? I want to display a smaller version on the page, but when the user clicks the image generated from qrdata (wrapped in an anchor), I'd like to let them download a larger version. Can that be done?
from angularx-qrcode.
@baywind2018 Could you show some pseudocode to us? From my understanding, the easiest way is to generate 2 QR code and make the larger one display: none
. When a user clicks the image, which is the smaller one, we actually download the larger one.
from angularx-qrcode.
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.
from angularx-qrcode.
I have the same question,But my project use [email protected], I can't update to [email protected] . are you able to provide any methods to resolve it?
from angularx-qrcode.
Please provide some sample-code for me on a plunkr or jsfiddle.
from angularx-qrcode.
@Cordobo use [email protected], my project use [email protected], when I run it with ssr, error "document is not defined" in [email protected] module . I have no idea to resolve it.
from angularx-qrcode.
Maybe a pull request and a new release on NPM?
from angularx-qrcode.
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?
from angularx-qrcode.
Hi @Dyabel03
No, the code from @cbernth has not been integrated into the repo yet.
from angularx-qrcode.
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.
from angularx-qrcode.
i need too for my work so, please could you help us to fix it for angular universal.
still same error when execute 😢
from angularx-qrcode.
@Dyabel03 @alchemistt99 PRs are more than welcome!
from angularx-qrcode.
Hi @naumov-dev, could you please provide a stripped down repo for me to reproduce?
from angularx-qrcode.
@ZhenhangTung Thanks for your investigation, I have a look into it
from angularx-qrcode.
Related Issues (20)
- Usage with Angular 15 not working (version: "angularx-qrcode": "^15.0.0") HOT 4
- Replace qrcode library to fix commonjs warning HOT 3
- angularx-qrcode > @cordobo/[email protected]: Package no longer supported HOT 1
- QR-Code not displayed in Google Chrome when center image is defined HOT 3
- qrCode not working in dialog window! HOT 4
- [email protected] (Angular v8) should have a callback for returning the url when is created HOT 1
- Accidentally pulling in @types/node HOT 7
- Support for Angular 16 HOT 5
- How many string can [qrdata] hold? HOT 1
- angular 16.1.8 declare var AbortSignal: error HOT 4
- When i scan the QR code the accents are replaced with chinese characters HOT 1
- Is it possible to get the Base64 image string for a QR code in a TS file? HOT 3
- qrcode types missing HOT 7
- When i initialize the QR code,Chrome console show : Uncaught (in promise) SyntaxError: Unexpected token '�', "�PNG
- Support for Angular 17 HOT 8
- Support qrCodeURL (EventEmitter) for 12.0.3 version HOT 1
- Ionic Capacitor NSURLResponse error HOT 2
- Could not find a declaration file for module 'qrcode' HOT 9
- types.ts RGBAColor issue HOT 1
- Warning on Compilation: Dependency on CommonJS 'qrcode' Module Causes Optimization Bailouts HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angularx-qrcode.