我正在尝试将QuaggaJS与Angular 2一起使用。我在app文件夹中有quagga.d.ts文件,在组件中具有以下import语句:

import Quagga from './quagga.d';


该指南从“ quagga”说到,但它不起作用,但以上的著作

declare const Quagga = require('quagga').default;


我在组件的构造函数中有以下代码,如下所示:

constructor() {

    Quagga.init({
    inputStream : {
      name : "Live",
      type : "LiveStream",
      target: document.querySelector('#yourElement')    // Or '#yourElement' (optional)
    },
    decoder : {
      readers : ["code_128_reader"]
    }
  }, function(err) {
      if (err) {
          console.log(err);
          return
      }
      console.log("Initialization finished. Ready to start");
      Quagga.start();
  });


 }


但是,出现以下错误:

来自core.umd.js的Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'init' of undefined



 Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'init' of undefined
TypeError: Cannot read property 'init' of undefined


来自zone.js

这个错误是什么意思?我无法弄清楚! zone.js是否存在错误?

任何帮助将不胜感激!

最佳答案

要将Quagga添加到node_modules运行

npm install quagga --save


像往常一样在js中添加cssindex.html依赖项
例如

<script src="node_modules/....../qugga.min.js"></script>


app.component.ts

import { Component, OnInit } from '@angular/core';
declare var Quagga:any;
@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent implements OnInit {
  ngOnInit() {
      Quagga.init({
        inputStream : {
          name : "Live",
          type : "LiveStream",
          target: document.querySelector('#yourElement')    // Or '#yourElement' (optional)
        },
        decoder : {
          readers : ["code_128_reader"]
        }
      }, function(err) {
          if (err) {
              console.log(err);
              return
          }
          console.log("Initialization finished. Ready to start");
          Quagga.start();
      });
  }

}


使用ngOnInit代替构造函数。尽管构造函数仅实例化组件,但在加载组件后将调用ngOnInit

另外,看看
https://github.com/serratus/quaggaJS/issues/146以获得下一步所需的其他帮助。

09-25 17:48