Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add UI component in Angular 12 web #62

Open
pablogupi opened this issue Dec 20, 2021 · 0 comments
Open

Add UI component in Angular 12 web #62

pablogupi opened this issue Dec 20, 2021 · 0 comments

Comments

@pablogupi
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant