QuaggaJS with Angular 2 problems

Question

I\'m trying to use QuaggaJS with Angular 2. I have the quagga.d.ts file in the app folder and the following import statements in the component:

import Quagga         


        

Answer 1

To add Quagga to node_modules run

npm install quagga --save

add js and css dependencies in index.html as usual for example

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

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

}

Use ngOnInit instead of the constructor. While the constructor only instantiates the component, ngOnInit will be called after the component is loaded.

Also, take a look at https://github.com/serratus/quaggaJS/issues/146 for some other help you would need in next step.