Implementieren eines Barcode-Scanners in Angular 4

Question

Ich versuche, einen Barcode-Scanner mit Angular 4 zu implementieren, mit diesem Plugin - https://github.com/isonet/angular-barcode-scanner.

In meiner scanner.component.ts Seite habe ich;

import { Component, OnInit} from '@angular/core'; 
    import 'angular-barcode-scanner'; 
... 

In meiner app.module.ts-Datei;

.... 
import { BarcodeScanner} from 'angular-barcode-scanner'; 

    @NgModule({ 
     declarations: [ 
     AppComponent 
     ], 
     imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     RouterModule.forRoot(routes), 
     LoginModule, 
     SignupModule, 
     DashboardModule, 
     ReactiveFormsModule, 
     BarcodeScanner 
     ], 
     providers: [ 
     DataService, 
     TokenService 
     ], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { } 

Und dann in meiner scanner.component.html Datei;

<barcode-scanner separator-char="separatorChar" trigger-char="triggerChar" scan-callback="scanCallback" 
       trigger-callback="triggerCallback"></barcode-scanner> 
     </div> 
    </div> 

Allerdings erhalte ich die folgenden Fehler in der Konsole

Uncaught ReferenceError: angular is not defined 
    at Object.defineProperty.value (angular-barcode-scanner.js:1) 
    at r (angular-barcode-scanner.js:1) 
    at Object.defineProperty.value (angular-barcode-scanner.js:1) 
    at angular-barcode-scanner.js:1 
    at t (angular-barcode-scanner.js:1) 
    at Object.<anonymous> (angular-barcode-scanner.js:1) 
    at __webpack_require__ (bootstrap 0689b0e…:52) 
    at Object.152 (bsElement.routes.ts:9) 
    at __webpack_require__ (bootstrap 0689b0e…:52) 
    at Object.413 (chart.module.ts:12) 
    at __webpack_require__ (bootstrap 0689b0e…:52) 
    at Object.153 (chart.component.ts:11) 
    at __webpack_require__ (bootstrap 0689b0e…:52) 
    at Object.155 (dashboard.component.ts:12) 
    at __webpack_require__ (bootstrap 0689b0e…:52) 
Object.defineProperty.value @ angular-barcode-scanner.js:1 
r @ angular-barcode-scanner.js:1 
Object.defineProperty.value @ angular-barcode-scanner.js:1 
(anonymous) @ angular-barcode-scanner.js:1 
t @ angular-barcode-scanner.js:1 
(anonymous) @ angular-barcode-scanner.js:1 
__webpack_require__ @ bootstrap 0689b0e…:52 
152 @ bsElement.routes.ts:9 
__webpack_require__ @ bootstrap 0689b0e…:52 
413 @ chart.module.ts:12 
__webpack_require__ @ bootstrap 0689b0e…:52 
153 @ chart.component.ts:11 
__webpack_require__ @ bootstrap 0689b0e…:52 
155 @ dashboard.component.ts:12 
__webpack_require__ @ bootstrap 0689b0e…:52 
405 @ app.module.ts:40 
__webpack_require__ @ bootstrap 0689b0e…:52 
404 @ main.ts:12 
__webpack_require__ @ bootstrap 0689b0e…:52 
424 @ table.module.ts:12 
__webpack_require__ @ bootstrap 0689b0e…:52 
393 @ src async:7 
__webpack_require__ @ bootstrap 0689b0e…:52 
733 @ main.bundle.js:2545 
__webpack_require__ @ bootstrap 0689b0e…:52 
webpackJsonpCallback @ bootstrap 0689b0e…:23 
(anonymous) @ main.bundle.js:1 
bundle.js:19 Uncaught ReferenceError: ng is not defined 
    at N (bundle.js:19) 
    at VueComponent.ready (bundle.js:15) 
    at VueComponent.LN.M._callHook (bundle.js:5) 
    at VueComponent.z (bundle.js:5) 
    at VueComponent.N (bundle.js:5) 
    at VueComponent.M.$emit (bundle.js:5) 
    at VueComponent.LN.M._callHook (bundle.js:5) 
    at z (bundle.js:5) 
    at VueComponent.M.$before (bundle.js:5) 
    at CN.transition (bundle.js:6) 
    at CN.mountComponent (bundle.js:6) 
    at bundle.js:6 
    at bundle.js:6 
    at N (bundle.js:4) 
    at ON.QN.M._resolveComponent (bundle.js:5) 
N @ bundle.js:19 
ready @ bundle.js:15 
LN.M._callHook @ bundle.js:5 
z @ bundle.js:5 
N @ bundle.js:5 
M.$emit @ bundle.js:5 
LN.M._callHook @ bundle.js:5 
z @ bundle.js:5 
M.$before @ bundle.js:5 
transition @ bundle.js:6 
mountComponent @ bundle.js:6 
(anonymous) @ bundle.js:6 
(anonymous) @ bundle.js:6 
N @ bundle.js:4 
QN.M._resolveComponent @ bundle.js:5 
resolveComponent @ bundle.js:6 
setComponent @ bundle.js:6 
bind @ bundle.js:6 
CN._bind @ bundle.js:6 
Gz @ bundle.js:4 
(anonymous) @ bundle.js:4 
M._compile @ bundle.js:5 
M.$mount @ bundle.js:5 
M._init @ bundle.js:4 
Y.M._init @ bundle.js:19 
ON @ bundle.js:5 
(anonymous) @ bundle.js:3 
zone.js:155 Uncaught TypeError: Cannot read property 'geAdapter' of undefined 
    at WebSocket._ws.onopen (eval at M.exports (bundle.js:3), <anonymous>:97:46) 
    at WebSocket.wrapFn [as _onopen] (zone.js:851) 
    at ZoneDelegate.invokeTask (zone.js:262) 
    at Zone.runTask (zone.js:151) 
    at WebSocket.ZoneTask.invoke (zone.js:332) 
_ws.onopen @ VM53541:97 
wrapFn @ zone.js:851 
ZoneDelegate.invokeTask @ zone.js:262 
Zone.runTask @ zone.js:151 
ZoneTask.invoke @ zone.js:332 

Jede Hilfe sehr geschätzt wird.

Answer 1

https://github.com/isonet/angular-barcode-scanner ist eine AngularJS (V1) App und Sie scheinen Angular (V4 möglicherweise?) App zu bauen. Ich glaube nicht, dass Sie einfach <barcode-scanner> verwenden können.