superiorjt / angular2-qrcode Goto Github PK
View Code? Open in Web Editor NEWAn Angular 2 component that generates a QR Code.
An Angular 2 component that generates a QR Code.
I get the following error when i try to install angular2-qrcode:
npm install angular2-qrcode --save
> [email protected] install /Users/emin93/WebstormProjects/MyProject/node_modules/canvas
> node-gyp rebuild
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
SOLINK_MODULE(target) Release/canvas-postbuild.node
clang: warning: libstdc++ is deprecated; move to libc++ with a minimum deployment target of OS X 10.9
CXX(target) Release/obj.target/canvas/src/Canvas.o
In file included from ../src/Canvas.cc:20:
../src/JPEGStream.h:10:10: fatal error: 'jpeglib.h' file not found
#include <jpeglib.h>
^
1 error generated.
make: *** [Release/obj.target/canvas/src/Canvas.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/Users/emin93/.nvm/versions/node/v6.9.4/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack at emitTwo (events.js:106:13)
gyp ERR! stack at ChildProcess.emit (events.js:191:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
gyp ERR! System Darwin 16.4.0
gyp ERR! command "/Users/emin93/.nvm/versions/node/v6.9.4/bin/node" "/Users/emin93/.nvm/versions/node/v6.9.4/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/emin93/WebstormProjects/MyProject/node_modules/canvas
gyp ERR! node -v v6.9.4
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok
But when i try to use it in my app it seems to work anyway. Not sure why this error happens.
import { QRCodeModule } from 'angular2-qrcode';
@NgModule({
imports: [
FormsModule,
BrowserModule,
HttpModule,
AppRoutingModule,
ReactiveFormsModule,
QRCodeModule,
AgmCoreModule.forRoot({
apiKey: '...',
libraries: ["places"]
})
],
...
i add QRCode to my app but when running i get error :
Error: Unexpected token <
Evaluating http://localhost:2634/qrious
Evaluating http://localhost:2634/app/app.module.js
Evaluating http://localhost:2634/app/main.js
Loading ../app
at eval (<anonymous>)
at evaluate (system.src.js:2821)
at system.src.js:3620
at dynamicExecute (system.src.js:1144)
at doEvaluate (system.src.js:1091)
at ensureEvaluate (system.src.js:999)
at system.src.js:1017
at doEvaluate (system.src.js:1089)
at ensureEvaluate (system.src.js:999)
at system.src.js:1017
my angular version is: @angular/core": "~4.2.3"
and no directives attribute in @component of this angular version
When I try ng build I face this error
ERROR in QRCodeModule is not an NgModule
my ng v
@angular/cli: 1.0.0-rc.0
node: 7.2.1
os: linux x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.9
there is a way for get generated QRCode and use it as image or object on TS side ?
i want to add this QRCode to a PDF.
I am trying to generate QR code for the Google Authenticator App with the use of uri which is something like this
otpauth://totp/App%3Fsecret=XX47YM3N7JC6EN5B6DHRDNYW2AO74JYK
And i am assigning the same with following markup
<qr-code [value]="QRUrl" [size]="150" canvas="true"></qr-code>
Variable QRUrl is having the complete uri as mentioned but the qr code generated after rendering is having only upto 30 characters of the value
<qr-code _ngcontent-c5="" canvas="true" ng-reflect-size="150" ng-reflect-value="otpauth://totp/App%3Fsecret=XX" ng-reflect-canvas="true"><canvas height="150" width="150"></canvas></qr-code>
I'm getting following error while trying to use this package in my Angular application in VS2017 and Systemjs (not webpack)
A loader plugin needs to be configured via
SystemJS.config({ transpiler: 'transpiler-module' }). Instantiating http://localhost:18520/node_modules/angular2-qrcode/lib/index.js
Every time I serve my project or build it, I have this error message. This is stopping to build with AoT.
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/dir/app'
using 2.0.1 android ionic 2.2.2 ,cordova 6.5.0
build prod failed: Metadata version mismatch for module
/Users/suboan/Desktop/ProjectFile/ionic2/vwAPP_2.0/node_modules/angular2-qrcode/lib/angular2-qrcode.d.ts,
found version 2.0.1, expected 1
[17:11:10] ionic-app-script task: "build"
[17:11:10] Error: Metadata version mismatch for module
/Users/suboan/Desktop/ProjectFile/ionic2/vwAPP_2.0/node_modules/angular2-qrcode/lib/angular2-qrcode.d.ts,
found version 2.0.1, expected 1
Error: Metadata version mismatch for module /Users/suboan/Desktop/ProjectFile/ionic2/vwAPP_2.0/node_modules/angular2-qrcode/lib/angular2-qrcode.d.ts, found version 2.0.1, expected 1
at StaticReflector.getModuleMetadata (/Users/suboan/Desktop/ProjectFile/ionic2/vwAPP_2.0/node_modules/@angular/compiler-cli/src/static_reflector.js:500:23)
at /Users/suboan/Desktop/ProjectFile/ionic2/vwAPP_2.0/node_modules/@angular/compiler-cli/src/codegen.js:122:46
at Array.forEach (native)
at extractProgramSymbols (/Users/suboan/Desktop/ProjectFile/ionic2/vwAPP_2.0/node_modules/@angular/compiler-cli/src/codegen.js:120:10)
at CodeGenerator.codegen (/Users/suboan/Desktop/ProjectFile/ionic2/vwAPP_2.0/node_modules/@angular/compiler-cli/src/codegen.js:57:29)
at Object.runCodegen (/Users/suboan/Desktop/ProjectFile/ionic2/vwAPP_2.0/node_modules/@ionic/app-scripts/dist/aot/codegen/codegen-ng22.js:15:26)
at Object.doCodegen (/Users/suboan/Desktop/ProjectFile/ionic2/vwAPP_2.0/node_modules/@ionic/app-scripts/dist/aot/codegen.js:6:31)
at /Users/suboan/Desktop/ProjectFile/ionic2/vwAPP_2.0/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:41:30
Could you add a parameter to style the colors of the QR?
Thnx
Hello, I'm getting this error on my template.
<qr-code [ERROR ->][data]="'All QR Code data goes here!'" [size]="150"></qr-code>
Any ideas why?
I have to say that I'm developing in Ionic 2. I imported everything fine, but still have this error.
[19:26:46] build prod failed: Unexpected value 'QRCodeModule' imported by the module 'AppModule'
[19:26:46] ionic-app-script task: "build"
[19:26:46] Error: Unexpected value 'QRCodeModule' imported by the module 'AppModule'
Error: Unexpected value 'QRCodeModule' imported by the module 'AppModule'
at E:\ionic app\ionicc1\node_modules@angular\compiler\bundles\compiler.umd.js:14078:37
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (E:\ionic app\ionicc1\node_modules@angular\compiler\bundles\compiler.umd.js:14063:46)
at E:\ionic app\ionicc1\node_modules@angular\compiler\bundles\compiler.umd.js:12865:47
at Array.forEach (native)
at analyzeModules (E:\ionic app\ionicc1\node_modules@angular\compiler\bundles\compiler.umd.js:12864:17)
at OfflineCompiler.analyzeModules (E:\ionic app\ionicc1\node_modules@angular\compiler\bundles\compiler.umd.js:12889:18)
at CodeGenerator.codegen (E:\ionic app\ionicc1\node_modules@angular\compiler-cli\src\codegen.js:121:47)
at Object.runCodegen (E:\ionic app\ionicc1\node_modules@ionic\app-scripts\dist\aot\codegen\codegen-ng22.js:15:26)
at Object.doCodegen (E:\ionic app\ionicc1\node_modules@ionic\app-scripts\dist\aot\codegen.js:6:31)
Hello !
It seems that a debug print made it to the release recently pushed on npm. The console.log() call can be found at :
https://github.com/SuperiorJT/angular2-qrcode/blob/master/angular2-qrcode.js#L22
Thanks for your your work !
Would it be possible to add left and top margins so I can move the QR code around?
Error: Could not generate QR Code: Cannot read property 'length' of undefined.
Module works perfectly. thanx
Hello, is there a way to place a logo in the qr code?
onic build android --prod
[15:04:54] build prod failed: Unexpected value 'QRCodeModule' imported by the module 'AppModule'
[15:04:54] ionic-app-script task: "build"
[15:04:54] Error: Unexpected value 'QRCodeModule' imported by the module 'AppModule'
Error: Unexpected value 'QRCodeModule' imported by the module 'AppModule'
at /private/var/www/app/mo/node_modules/@angular/compiler/bundles/compiler.umd.js:14675:3
I noticed during a license review of my app dependancies that even though angular2-qrcode is published under the MIT license, the QRious dependancy is licensed under GPL3. As far as I am aware, this means that angular2-qrcode should also have a GPL3 license.
I am not affiliated with the QRious project so this isn't me trying to be the license police. It is more the case that I would like to confirm that I am allowed use angular2-qrcode under MIT as it stands, or else if it is possible to remove the GPL dependancy.
Hi,
I am new to Angular2 and I am creating an application for QRCode generation and I am using this library for that, but somehow I am unable to get it worked. It says Canvas module not found, and it's dependency is not installed as well.
can anyone help me on this? Thank You
hy , i am building ionic app and i am using angular2-qrcode. everything is done right app is running perfect offline but when i deploy on ionic view for testing. it shows Build failed error.
Hi is it possible to support chinese characters?
No release available in git history for using old version in AngularJS 4RC.
Provide a new parameter "download" to specify a filename for downloading the QR code image. If this parameter is specified, surround the with an A tag with the "download" attribute set with the given parameter value. This should open the "save as" dialog when the user clicks on the QR code.
I use version 2.0.1. and build in aot ,but
QRCodeModule in H:/isclib_dev_v1.0/node_mod
ules/angular2-qrcode/lib/index.d.ts' imported by the module 'DemoModule in H:
/isclib_dev_v1.0/src/app/demo/demo.module.ts'. Please add a @NgModule annotation.
ok, I have solved it.
I use " var QRious =require('qrious') ;"
Unexpected value 'QRCodeModule' imported by the module 'SharedModule'
It need *.metadata.json
Hello sir,
Newbie in angular, I've just used your angular2-qrcode. I would like to fill data attribute dynamically by passing a variable which contains string I want to code. How can I do this?
I've tried something like this:
<ion-item>
<ion-label>Entrez votre texte</ion-label>
<ion-input type="text" [(ngModel)]="textField"></ion-input>
</ion-item>
<button ion-button block (click)="click()">Scan</button>
<button ion-button block (click)="make()">Make</button>
<p>{{textEncode}}</p>
<div>
<qr-code [data]="'{{textEncode}}'" [size]="250" [type]="8"></qr-code>
</div>
and in my typescript file it's like:
export class HomePage {
private textField: any;
private textEncode: any;
constructor(public navCtrl: NavController) {
this.textField = '';
this.textEncode = '';
}
// For reading barcode, work properly
click() {
BarcodeScanner.scan().then((barcodeData) => {
alert("Text: " + barcodeData.text + "\n" + "Format: " + barcodeData.format);
}, (err) => {
alert(err.message);
});
}
// For generating qr code, when I click on it, it display qr code then my app crashes
make() {
this.textEncode = this.textField;
}
}
When I execute I have the white screen death. Or, when I remove the qrcode tag, the p tag works correctly.
Thanks for your help, I work on ionic 2.
Hi,
Qrcode works almost perfectly, I can't figure out how to update the QR code by pressing a button. Seems bugged!
---HTML---
<qr-code [data]="data.qrCodeString" [size]="150"></qr-code>
<button (click)="onClickgenerateQR()"> Generate QR
</button>
---- TS -----
onClickgenerateQR() {
this.data.qrCodeString = "*0,ML123456,";
}
I want the value to be variable, something like this:
[value]="'{{ticket.qr}}'".
Were ticket.qr is a variable that contains specific data of that ticket.
Thank you.
build prod failed: Unexpected value 'QRCodeModule' imported by the module 'AppModule'
[02:26:11] ionic-app-script task: "build"
[02:26:11] Error: Unexpected value 'QRCodeModule' imported by the module 'AppModule'
Error: Unexpected value 'QRCodeModule' imported by the module 'AppModule'
at E:\ionic app\ionicc1\node_modules@angular\compiler\bundles\compiler.umd.js:14078:37
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (E:\ionic app\ionicc1\node_modules@angular\compiler\bundles\compiler.umd.js:14063:46)
at E:\ionic app\ionicc1\node_modules@angular\compiler\bundles\compiler.umd.js:12865:47
at Array.forEach (native)
at analyzeModules (E:\ionic app\ionicc1\node_modules@angular\compiler\bundles\compiler.umd.js:12864:17)
at OfflineCompiler.analyzeModules (E:\ionic app\ionicc1\node_modules@angular\compiler\bundles\compiler.umd.js:12889:18)
at CodeGenerator.codegen (E:\ionic app\ionicc1\node_modules@angular\compiler-cli\src\codegen.js:121:47)
at Object.runCodegen (E:\ionic app\ionicc1\node_modules@ionic\app-scripts\dist\aot\codegen\codegen-ng22.js:15:26)
at Object.doCodegen (E:\ionic app\ionicc1\node_modules@ionic\app-scripts\dist\aot\codegen.js:6:31)
Hi I am using the below code to bind to a variable in ionic 3. The QR code is generated. However when I scan this QR code, it shows a URI when qrCodeValue has a string. (qrCodeValue:string; this.qrCodeValue = "Order:" + this.orderId;)
<qr-code [(value)]="qrCodeValue" [size]="150">
Hi Guys,
Since directives have been depreciated on the latest/stable angular2, is there a chance you could update your how to implement this library. Having troubles getting it to work.
Cheers :-)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.