blinkid-in-browser
blinkid-in-browser copied to clipboard
Add UI component in Angular 12 web
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:
- npm install @microblink/blinkid-in-browser-sdk and copy /ui/dist in assets/ui and copy /resources/ in src/assets/resources
- In
tsconfig.app.json
I added"exclude": [ "src/assets/ui" ],
- 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" }]
- In
app.component.html
I added
<blinkid-in-browser
engine-location="http://localhost:4200/assets/resources/"
license-key=""
recognizers="BlinkIdRecognizer"
></blinkid-in-browser>
- And in
app.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