angularjs - איך לייבא את qrcode-generator לאפליקציית angular 2?

אני מנסה להשתמש ב-qrcode-generator באפליקציה שלי אך ללא הצלחה עם ההגדרות שלי למרות שזה עובד ב-Plunker, באפליקציה שלי אני משתמש ב-angular-cli וב-angular 2.rc-1.
שלבים לשחזור:

ng new newAppName
cd newAppName
ng serve

אז זה עובד.

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

לאחר מכן שנה את ההגדרות בשני קבצים. 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)'
    ]
  });
};

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

ערוך את new-app-name.component.ts וייבא את qrcode-geenerator לתוכו כך

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

אז ng serve שממשיך לרוץ נותן שגיאה עם ההודעה הזו:

/path/to/project/newAppName/tmp/broccoli_type_script_compiler-input_base_path-jscpZEq5.tmp/0/src/app/new-app-name.component.ts (3, 25): לא ניתן למצוא את המודול 'qrcode-generator'.

ניסיתי להתקין את ההקלדות עבור זה על ידי הוספת זה לקובץ typings.json:

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

לאחר מכן ריצה:

typings i

ההתקנה הצליחה, אך עדיין יש את אותה שגיאה. גרסת angular-cli:

angular-cli: 1.0.0-beta.5
node: 6.2.0
os: linux x64

האם אני מפספס משהו?
האם ישנה הגדרה אחרת שאני מפספס?

תשובה #1

בסופו של דבר הצלחתי לייבא את זה תודה ל-@JavascriptMick מ-gitter של angular-cli עשיתי את הדברים הבאים, קודם כל הפכו את הפורמט לגלובלי:

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

אז כשמייבאים עושים זאת כך:

import 'qrcode-generator';
declare let qrcode;

מקווה שזה יעזור.

תשובה #2

אני לא בטוח לגבי הדרישות הספציפיות שיש לך, אבל הנה אפליקציית AngularJS (גרסה 1) שמציעה יוצר קוד QR:

http://quir.li/qr.html

אתה יכול

• הכנס את הטקסט
• בחר את רמת קוד השגיאה
• בחר גודל
• הצג/העתק/הורד את קוד ה-QR מהמסך

אני מחבר העמוד הזה, אבל מחולל ה-QR הוא jsqrencode בכתובת [email

קוד המקור שלי נמצא ב-https://github.com/suterma/quirli/blob/master/website/qr.html