4

アプリで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

次に、2 つのファイルで構成を変更します。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-generatorを編集してインポートします

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

何か不足していますか？
不足している他の構成はありますか?

4

2 に答える 2

1

angular-cliのgitterの@JavascriptMickのおかげで、これを最終的にインポートできました。次のことを行い、最初にフォーマットをグローバルにしました。

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

次に、インポート時に次のようにします。

import 'qrcode-generator';
declare let qrcode;

この助けを願っています。

于 2016-05-30T15:05:01.350 に答える
0

具体的な要件についてはわかりませんが、QR コード ジェネレーターを備えた AngularJS (バージョン 1) アプリを次に示します。

http://quir.li/qr.html

あなたはできる

  • テキストを入力してください
  • エラーコードレベルを選択
  • サイズを選択
  • 画面からQRコードを閲覧・コピー・ダウンロード

私はこのページの作成者ですが、QR ジェネレーターはtz@execpc.comによる jsqrencode です。

私のソース コードはhttps://github.com/suterma/quirli/blob/master/website/qr.htmlにあります。

于 2016-05-27T11:13:15.330 に答える