如何将 qrcode-generator 导入 Angular 2 应用程序？

Posted 2023-03-13

【中文标题】如何将 qrcode-generator 导入 Angular 2 应用程序？

【英文标题】：how import qrcode-generator into angular 2 app?

【发布时间】：2016-09-25 16:21:52

【问题描述】：

我正在尝试在我的应用程序中使用 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并像这样在其中导入二维码生成器

// 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 from angular-cli's gitter，我终于能够导入这个我做了以下，首先将格式设为全局：

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

然后在导入时这样做：

import 'qrcode-generator';
declare let qrcode;

希望对您有所帮助。

【参考方案2】：

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

http://quir.li/qr.html

你可以

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

我是该页面的作者，但 QR 生成器是 [e-mail] 的jsqrencode

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

【讨论】：

对不起，我不清楚我正在使用 angular 2 和 angular-cli 我让它在我提供的 plunker 示例中与 qrcode-generator 插件一起使用，但无法在我的应用程序中使用使用 angular-cli，我只需要将其导入 typescript 模块。