superiorjt / angular2-qrcode Goto Github PK

Every time I serve my project or build it, I have this error message. This is stopping to build with AoT.

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.

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.

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

No release available in git history for using old version in AngularJS 4RC.

Got this error while trying to install the npm-package:

Could you add a parameter to style the colors of the QR?

Thnx

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

Hi is it possible to support chinese characters?

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.

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">

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.

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 !

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.

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.

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'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 viaSystemJS.config({ transpiler: 'transpiler-module' }). Instantiating http://localhost:18520/node_modules/angular2-qrcode/lib/index.js

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 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>

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

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

Hello, is there a way to place a logo in the qr code?

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,";
    }

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)

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

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') ;"

Hi

When i install component i get error for a pyton component.
Dont know what to do, please help.

Thanks.

Error: Could not generate QR Code: Cannot read property 'length' of undefined.
Module works perfectly. thanx

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 :-)

[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)

Would it be possible to add left and top margins so I can move the QR code around?