Question

我尝试在我的应用中使用qrcode-generator但我的设置没有成功，即使它在plunker中工作，在我的应用中我使用了角度-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个文件中的配置。角-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）：找不到模块＆＃39; qrcode-generator＆＃39;。

我尝试将它添加到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

我错过了什么吗？我还缺少其他配置吗？

Answer 1

我终于可以通过@JavascriptMick angular-cli's gitter来导入此内容了。我做了以下操作，首先将格式设为全局：

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

然后在导入时这样做：

import 'qrcode-generator';
declare let qrcode;

希望得到这个帮助。

Answer 2

我不确定您的具体要求，但这是一个具有QR码生成器的AngularJS（版本1）应用程序：

http://quir.li/qr.html

你可以

输入文字
选择错误代码级别
选择尺寸
从屏幕上查看/复制/下载QR码

我是该页面的作者，但QR生成器是jsqrencode by tz@execpc.com

我的源代码位于https://github.com/suterma/quirli/blob/master/website/qr.html

如何将qrcode-generator导入angular 2 app？

2 个答案: