如何将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

然后在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-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”。

我尝试通过将其添加到Types.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

我想念什么吗?
我还有其他配置吗?

雅亚·卡切姆

我能够导入此最后感谢@JavascriptMick角CLI的小胶质我做了如下,首先进行格式的全局:

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

然后在导入时以这种方式进行:

import 'qrcode-generator';
declare let qrcode;

希望对您有所帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

如何运行angular 2应用程序?

来自分类Dev

如何将angular.js模块导入Angular应用程序?

来自分类Dev

如何将 jQuery 插件导入 babel 应用程序

来自分类Dev

如何将Cordova应用程序从Angular Dart 1转换为Angular 2?

来自分类Dev

如何将mongoDB连接到angular2应用程序?

来自分类Dev

如何将 Angular 2 应用程序部署为独立的(使用 dist 文件夹)

来自分类Dev

如何将日历组件插入到 Angular 2 应用程序中?

来自分类Dev

如何将任何应用程序的选定文本导入Windows窗体应用程序

来自分类Dev

将D3.js导入Angular 2应用程序的正确方法

来自分类Dev

如何在angular 2应用程序中导入socket.io-client?

来自分类Dev

如何使Angular 2应用程序与桶文件导入一起使用?

来自分类Dev

如何在Angular 2 Webpack应用程序中导入jQuery ui touch Punch?

来自分类Dev

如何从jQuery.min.js导入$到Angular 2应用程序中?找不到名字

来自分类Dev

将Angular 2应用程序部署到Azure

来自分类Dev

将 Node.js 与 Angular 2 应用程序集成

来自分类Dev

将 Angular 2 应用程序部署到 Azure

来自分类Dev

如何在angular 2中使用“ SystemJsNgModuleLoader”将动态模块导入到应用程序?

来自分类Dev

如何异步引导Angular 2应用程序

来自分类Dev

如何在PHP应用程序中使用Angular 2?

来自分类Dev

如何调试Angular 2 Typescript应用程序

来自分类Dev

如何从 Angular2 应用程序获取 json 值

来自分类Dev

如何将小叶路由机包含到angular 2打字稿webpack应用程序中

来自分类Dev

如何将JavaScript模块添加到generator-meanjs应用程序?

来自分类Dev

如何将Apple的UIImage + Effects类别导入到我的Swift应用程序中?

来自分类Dev

如何将com.android.internal.telephony.ITelephony导入Android应用程序

来自分类Dev

如何将.sqlite3 / .sqlite文件导入ios应用程序?

来自分类Dev

如何将外部库导入ReactJS应用程序(本地)

来自分类Dev

如何将Objective-C文件添加/导入到快速应用程序

Related 相关文章

  1. 1

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

  2. 2

    如何运行angular 2应用程序?

  3. 3

    如何将angular.js模块导入Angular应用程序?

  4. 4

    如何将 jQuery 插件导入 babel 应用程序

  5. 5

    如何将Cordova应用程序从Angular Dart 1转换为Angular 2?

  6. 6

    如何将mongoDB连接到angular2应用程序?

  7. 7

    如何将 Angular 2 应用程序部署为独立的(使用 dist 文件夹)

  8. 8

    如何将日历组件插入到 Angular 2 应用程序中?

  9. 9

    如何将任何应用程序的选定文本导入Windows窗体应用程序

  10. 10

    将D3.js导入Angular 2应用程序的正确方法

  11. 11

    如何在angular 2应用程序中导入socket.io-client?

  12. 12

    如何使Angular 2应用程序与桶文件导入一起使用?

  13. 13

    如何在Angular 2 Webpack应用程序中导入jQuery ui touch Punch?

  14. 14

    如何从jQuery.min.js导入$到Angular 2应用程序中?找不到名字

  15. 15

    将Angular 2应用程序部署到Azure

  16. 16

    将 Node.js 与 Angular 2 应用程序集成

  17. 17

    将 Angular 2 应用程序部署到 Azure

  18. 18

    如何在angular 2中使用“ SystemJsNgModuleLoader”将动态模块导入到应用程序?

  19. 19

    如何异步引导Angular 2应用程序

  20. 20

    如何在PHP应用程序中使用Angular 2?

  21. 21

    如何调试Angular 2 Typescript应用程序

  22. 22

    如何从 Angular2 应用程序获取 json 值

  23. 23

    如何将小叶路由机包含到angular 2打字稿webpack应用程序中

  24. 24

    如何将JavaScript模块添加到generator-meanjs应用程序?

  25. 25

    如何将Apple的UIImage + Effects类别导入到我的Swift应用程序中?

  26. 26

    如何将com.android.internal.telephony.ITelephony导入Android应用程序

  27. 27

    如何将.sqlite3 / .sqlite文件导入ios应用程序?

  28. 28

    如何将外部库导入ReactJS应用程序(本地)

  29. 29

    如何将Objective-C文件添加/导入到快速应用程序

热门标签

归档