CODEWITHSUNDEEP
angularjstypescriptangular-clitypescript-typings
Yahya KACEM
Yahya KACEM

Reputation: 2481

how import qrcode-generator into angular 2 app?

I'm trying to use qrcode-generator in my app but no success with my settings even though it's working in plunker, in my app I'm using angular-cli and angular 2.rc-1.
Steps to reproduce: 

ng new newAppName
cd newAppName
ng serve

it works, then. 

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

then change the configurations in 2 files. angular-cli-build.js:

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      'qrcode-generator/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)'
    ]
  });
};

and system-config.ts:

/**********************************************************************************
 * User Configuration.
 *********************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'qrcode-generator': 'vendor/qrcode-generator'
};
const packages: any = {
  'vendor/qrcode-generator': {
    main: 'qrcode',
    defaultExtension: 'js'
  }
};
// ... the rest is the same

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 I'm missing?

Upvotes: 4

Views: 2717

Answers (2)

Yahya KACEM
Yahya KACEM

Reputation: 2481

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.

Upvotes: 1

Marcel
Marcel

Reputation: 15722

I am not sure about the specific requirements you have, but here is an AngularJS (Version 1) app that features a QR-Code generator:

http://quir.li/qr.html

You can

  • enter the text
  • select the error code level
  • select a size
  • View/Copy/download the QR code from the screen

I am the author of said page, but the QR generator is jsqrencode by [email protected]

My source code is at https://github.com/suterma/quirli/blob/master/website/qr.html

Upvotes: 0

Related Questions