blinkid-in-browser icon indicating copy to clipboard operation
blinkid-in-browser copied to clipboard

Add UI component in Angular 12 web

Open pablogupi opened this issue 3 years ago • 0 comments

Hi I Try to add the ui component https://github.com/BlinkID/blinkid-in-browser/tree/master/ui in Angular 12 app web. After multiple steps, I am stuck. These have been my steps:

  1. npm install @microblink/blinkid-in-browser-sdk and copy /ui/dist in assets/ui and copy /resources/ in src/assets/resources
  2. In tsconfig.app.json I added "exclude": [ "src/assets/ui" ],
  3. In angular.json I added "scripts": [ { "input": "src/assets/ui/blinkid-in-browser/blinkid-in-browser.esm.js", "inject": true, "bundleName": "blinkid-in-browser.esm" }]
  4. In app.component.html I added
<blinkid-in-browser
      engine-location="http://localhost:4200/assets/resources/"
      license-key=""
      recognizers="BlinkIdRecognizer"
    ></blinkid-in-browser>
  1. And inapp.component.ts I added
constructor(private readonly elementRef: ElementRef) {
  }

  afterViewInit() {
    const el = this.elementRef.nativeElement.querySelector('blinkid-in-browser');
    el.addEventListener('scanSuccess', (ev:any) => {
      // Since UI component uses custom events, data is placed in `detail` property
      console.log('Results', ev.detail);
    });

  }

With this config when run ng serve build correctly, but when open web in navigator, always get this console error:

SyntaxError: Unexpected token '{'. import call expects exactly one argument. blinked-in-browser.esm.js:1 I have tried different ways to load the script, but I always get that error. is there any way to load it correctly for Angular?

Thank you very much

pablogupi avatar Dec 20 '21 09:12 pablogupi