QuaggaJS 与 Angular 2 问题答案

【问题标题】：QuaggaJS with Angular 2 problemsQuaggaJS 与 Angular 2 问题
【发布时间】：2017-07-22 04:36:32
【问题描述】：

我正在尝试将 QuaggaJS 与 Angular 2 一起使用。我在 app 文件夹中有 quagga.d.ts 文件，并且在组件中有以下导入语句：

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();
  });


 }

但是，我收到以下错误：

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

和

 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 有错误吗？

任何帮助将不胜感激！

【问题讨论】：

angular-cli 或 webpack 或 systemjs ?
对不起，我是新手 - 我有一个 systemjs.config.js 文件

标签： angular quaggajs

【解决方案1】：

将 Quagga 添加到 node_modules 运行

npm install quagga --save

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

<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 获取您在下一步中需要的其他帮助。

【讨论】：