Documentations on how to use with typescript

[yahyaKacem]

Hi, I'm trying to use this with Angular2, but I don't see a documentations explaining how to use with typescript, is a detailed documentation a possibility in the future?

[stefanhuber]

Hi, I added the definition files to typings (https://github.com/DefinitelyTyped/DefinitelyTyped/pull/8932). So to use it you have to do the following:

• npm install qrcode-generator
• typings install qrcode-generator --save --ambient
• import qrcode = require('qrcode-generator'); inside your ts file

that is all to use it with intellisense and what not...

[yahyaKacem]

Hi, thanks for your response, but I know 2 ways of loading libraries like this:

import qrcode from 'qrcode-generator';
// or
let qrcode = require('qrcode-generator');

but I never saw that before:

import qrcode = require('qrcode-generator');

anyway, I tried those the only one that worked for me is:

let qrcode = require('qrcode-generator');

The other ones I get can't find module 'qrcode-generator' during build with gulp.

[anaganisk]

I am getting this error Attempted to compile "qrcode-generator" as an external module, but it looks like a global module.

[stefanhuber]

Hi, when do you get this error? At what step?

[anaganisk]

while installing typings, but tried it with --global flag it fixed the errors but there is another error, It seems like createImageTag() (in typings) function has some issues may its createImgTag() instead.

[stefanhuber]

Ok. I see the changes. At the time of writing this typing there were ambient typings, which are now global: https://github.com/typings/typings#updating-from-0x-to-10. I can check this other error later today. If you find anything feel free to tell us

[yahyaKacem]

I'm still can't get this to work with my settings even though it's working in plunker, in my app I'm using angular-cli. Steps to reproduce: make new app:

ng new newAppName
cd newAppName
ng serve

it works.

npm i qrcode-generator // (note this is missing the svg support).
ng serve // stil work

edit new-app-name.component.ts and import the qrcode-geenerator in it like this

// vscode underline the qrcode-generator string and complai about not finding it
import * as qrcode from 'qrcode-generator'; 

then ng serve which is still running errors out with this message:

/path/to/project/newAppName/tmp/broccoli_type_script_compiler-input_base_path-jscpZEq5.tmp/0/src/app/new-app-name.component.ts (3, 25): Cannot find module 'qrcode-generator'.

I tried installing the typings for it by adding this to the typings.json file:

"globalDependencies": {
    "qrcode-generator": "registry:dt/qrcode-generator#0.0.0+20160412152159"
  }

then running:

typings i

install successful, but still the same error. angular-cli version: angular-cli: 1.0.0-beta.5 node: 6.2.0 os: linux x64 am I missing something? Is there other configuration to make for this to work?

[stefanhuber]

As I see it angular-cli is still using typings version < 1, so it needs to be amientDependencies, or you manually update typings to version > 1 in package.json.

[yahyaKacem]

I tried that but nothing was installed, I removed the global folder under the typings folder, then I moved this line:

"qrcode-generator": "registry:dt/qrcode-generator#0.0.0+20160412152159"

from globalDependencies to ambientDependencies: and then run this:

typings install --ambient qrcode-generator --save // or
typings install qrcode-generator --save

but I get:

└── (No dependencies)

and nothing was installed, typings in package.json is v0.8.1.

[yahyaKacem]

Hi, I was able to import this finally thanks to @JavascriptMick from angular-cli's gitter I did the following: first make the format global:

'vendor/qrcode-generator': {
    format: 'global',
    main: 'qrcode.js'
  }

then when importing do it this way:

import 'qrcode-generator';
declare let qrcode;

Hope this help.

[akang]

Example usage:

imports

import { QRCode ,ErrorCorrectLevel, QRNumber, QRAlphaNum, QR8BitByte, QRKanji } from "qrcode-generator-ts/js";

then

        let qrCode = new QRCode();
        qrCode.setErrorCorrectLevel(ErrorCorrectLevel.M);
        qrCode.setTypeNumber(4);
        qrCode.addData("test123");
        qrCode.make();
        let base64ImageString = qrCode.toDataURL();

[clayosborn]

Example usage:

imports

import { QRCode ,ErrorCorrectLevel, QRNumber, QRAlphaNum, QR8BitByte, QRKanji } from "qrcode-generator-ts/js";

then

        let qrCode = new QRCode();
        qrCode.setErrorCorrectLevel(ErrorCorrectLevel.M);
        qrCode.setTypeNumber(4);
        qrCode.addData("test123");
        qrCode.make();
        let base64ImageString = qrCode.toDataURL();

Nice to see some sort of usage on here, in the complete absence of any kind of documentation. However, while this is great, I have no clue what setTypeNumber even is, and why I need it.... because this project has no documentation!