mhadaily/ngx-barcode-validator

Quagga is not found when run locally

sebscape opened this issue · 3 comments

sebscape commented

I believe a config file or a setup step is missing: After cloning the repository, and running npm install, I run ng server. I can connect to localhost:4200, but when I select the Stream option, I see the following in my console window:

ERROR TypeError: Cannot read property 'init' of undefined
    at BarcodeDecoderService.webpackJsonp.../../../../../src/app/services/barcode-decoder.service.ts.BarcodeDecoderService.onLiveStreamInit (barcode-decoder.service.ts:43)
    at MediaStreamComponent.webpackJsonp.../../../../../src/app/barcode/media-stream/media-stream.component.ts.MediaStreamComponent.ngOnInit (media-stream.component.ts:26)
    at checkAndUpdateDirectiveInline (core.es5.js:10843)
    at checkAndUpdateNodeInline (core.es5.js:12341)
    at checkAndUpdateNode (core.es5.js:12284)
    at debugCheckAndUpdateNode (core.es5.js:13141)
    at debugCheckDirectivesFn (core.es5.js:13082)
    at Object.eval (MediaStreamComponent_Host.html:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)
    at checkAndUpdateView (core.es5.js:12251)

This references the following snippet of code:

...
  onLiveStreamInit() {
    const state = this.setLiveStreamConfig();
    Quagga.init(state, (err) => {  // <===== here is the error; Quagga is undefined.
      if (err) {
        return console.error(err);
      }
      Quagga.start();
    });
  }

I see in the history that you most recently updated libraries, removed quagga.min.js from the vendors folder, and removed the reference from .angular-cli.json's script section.

The app does work on your demo site, so perhaps there is some relic from the old setup which is allowing your demo-setup to function?

sebscape commented

Found the fix(es):

  1. add to .angular-cli.json scripts the following:
...
"scripts": ["../node_modules/quagga/dist/quagga.min.js"],
...
  1. Modify the Quagga import at the top of barcode-decoder.service.ts to use the following format:
...
import * as Quagga from 'Quagga';
...
  1. Be sure you do not have another instance of this app connected to your camera!
  • 👍1
mhadaily commented

Glad, you fixed your issue. I will release a new version as an NPM package and will update this repo for angular5 soon.

sebscape commented

I will be watching for the release of the module - thanks!

  • 👍1