QuaggaJS с проблемами Angular 2

Question

Я пытаюсь использовать QuaggaJS с Angular 2. У меня есть файл quagga.d.ts в папке приложения и следующие операторы импорта в компоненте:

import Quagga from './quagga.d';

Гид говорит от "квага", но это не работает, но выше работает

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?

Любая помощь будет принята с благодарностью!

Answer 1

Добавить Quagga в node_modules бежать

npm install quagga --save

добавлять js а также css зависимости в index.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 некоторую другую помощь, которая понадобится вам в следующем шаге.