title: Implementing a barcode scanner in Angular 4
body: <p>I am trying to implement a barcode scanner using Angular 4, using this plugin - <a href="https://github.com/isonet/angular-barcode-scanner" rel="nofollow noreferrer">https://github.com/isonet/angular-barcode-scanner</a>.</p>
  
  <p>In my <code>scanner.component.ts</code> page I have;</p>
  
  <pre><code>    import { Component, OnInit} from '@angular/core';
      import 'angular-barcode-scanner';
  ...
  </code></pre>
  
  <p>In my <code>app.module.ts</code> file;</p>
  
  <pre><code>  ....
  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 { }
  </code></pre>
  
  <p>And then in my <code>scanner.component.html</code> file;</p>
  
  <pre><code>&lt;barcode-scanner separator-char="separatorChar" trigger-char="triggerChar" scan-callback="scanCallback"
                  trigger-callback="triggerCallback"&gt;&lt;/barcode-scanner&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>However, I get the following errors in console</p>
  
  <pre><code>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.&lt;anonymous&gt; (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), &lt;anonymous&gt;: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
  </code></pre>
  
  <p>Any help is appreciated.</p>