Yahya KACEM Yahya KACEM - 1 year ago 532
AngularJS Question

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.

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [

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

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

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

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download