Ngx-scanner: Can't bind to 'device' since it isn't a known property of 'zxing-scanner'.

[moleisking]

Describe the bug
It related to the following line as I have tried to copy your example on plunker.

<zxing-scanner #scanner start="cameraActive" [device]="devicex" (scanSuccess)="handleQrCodeResult($event)"></zxing-scanner>

@NgModule({
  declarations: [
    MyApp, ImageEditPage, ImageCropperComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    HttpClientModule,
    FormsModule,
    ZXingScannerModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        'provide': TranslateLoader,
        'useFactory': (createTranslateLoader),
        'deps': [HttpClient]
      }
    }),
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot() 
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp, 
    ImageEditPage    
  ],
  providers: [
    AlertService,
    AssetService,
    AuthService,
    DeviceService,
    Geolocation,
    GPSService,
    LocationService,
    UserService,
    Camera,
    Crop,
    CameraService,
    TagService,
    Dialogs,
    SplashScreen,
    StatusBar,  
    { 'provide': ErrorHandler, 'useClass': IonicErrorHandler }
  ]
})

ionic 3
android 7.1.1
browser 5.0.3
cordova 8.0.0

[odahcam]

Please provide your @zxing/ngx-scanner version. 🙂

[moleisking]

"@zxing/ngx-scanner": "^1.2.0",
"@zxing/library": "^0.7.0",

[odahcam]

Don't you have any output, error log or something else?

[moleisking]

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'device' since it isn't a known property of 'zxing-scanner'.

1. If 'zxing-scanner' is an Angular component and it has 'device' input, then verify that it is part of this module.
2. If 'zxing-scanner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (">
   
   
   ][device]="devicex" (scanSuccess)="handleQrCodeResult($event)">
   

"): ng:///QRScannerPageModule/QRScannerPage.html@5:61
'zxing-scanner' is not a known element:

1. If 'zxing-scanner' is an Angular component, then verify that it is part of this module.
2. If 'zxing-scanner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   
   
   
   [ERROR ->]html@5:16
   Error: Template parse errors:
   Can't bind to 'device' since it isn't a known property of 'zxing-scanner'.
3. If 'zxing-scanner' is an Angular component and it has 'device' input, then verify that it is part of this module.
4. If 'zxing-scanner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
5. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (">
   
   
   ][device]="devicex" (scanSuccess)="handleQrCodeResult($event)">
   

"): ng:///QRScannerPageModule/QRScannerPage.html@5:61
'zxing-scanner' is not a known element:

1. If 'zxing-scanner' is an Angular component, then verify that it is part of this module.
2. If 'zxing-scanner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   
   
   
   [ERROR ->]html@5:16
   at syntaxError (compiler.js:486)
   at TemplateParser.parse (compiler.js:24674)
   at JitCompiler._parseTemplate (compiler.js:34629)
   at JitCompiler._compileTemplate (compiler.js:34604)
   at compiler.js:34505
   at Set.forEach ()
   at JitCompiler._compileComponents (compiler.js:34505)
   at compiler.js:34375
   at Object.then (compiler.js:475)
   at JitCompiler._compileModuleAndComponents (compiler.js:34374)
   at syntaxError (compiler.js:486)
   at TemplateParser.parse (compiler.js:24674)
   at JitCompiler._parseTemplate (compiler.js:34629)
   at JitCompiler._compileTemplate (compiler.js:34604)
   at compiler.js:34505
   at Set.forEach ()
   at JitCompiler._compileComponents (compiler.js:34505)
   at compiler.js:34375
   at Object.then (compiler.js:475)
   at JitCompiler._compileModuleAndComponents (compiler.js:34374)
   at c (polyfills.js:3)
   at Object.reject (polyfills.js:3)
   at NavControllerBase._fireError (nav-controller-base.js:223)
   at NavControllerBase._failed (nav-controller-base.js:216)
   at nav-controller-base.js:263
   at t.invoke (polyfills.js:3)
   at Object.onInvoke (core.js:4760)
   at t.invoke (polyfills.js:3)
   at r.run (polyfills.js:3)
   at polyfills.js:3

[odahcam]

This looks like a user-code error, me myself had to deal with errors like this several times. Probably you forgot to include the ZXingScannerModule in your feature module. Please review your app to make sure you're not forgeting anything. 🙂

[odahcam]

If there's any question yet, feel free to ask.

[acndr]

@moleisking Did you resolve this? Having the exact same issue (ionic)

I have included the module in the main app class:

...
import { ZXingScannerModule } from '@zxing/ngx-scanner';
...

@NgModule({
    ...

    imports: [
        ZXingScannerModule.forRoot()
    ],
    ...
})
export class AppModule {
  constructor() {
  }
}

Then in my page I am importing it again:

...
import {ZXingScannerComponent} from '@zxing/ngx-scanner';
...
export class ScanPage {

    scanner: ZXingScannerComponent;

}

But getting the same error as you:

Can't bind to 'device' since it isn't a known property of 'zxing-scanner'.
1. If 'zxing-scanner' is an Angular component and it has 'device' input, then verify that it is part of this module.
2. If 'zxing-scanner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ner page-scan-camera-ready">

            <zxing-scanner #scanner class="test-class" start="true" [ERROR ->][device]="selectedDevice" (scanSuccess)="handleQrCodeResult($event)"></zxing-scanner>

...

'zxing-scanner' is not a known element:
1. If 'zxing-scanner' is an Angular component, then verify that it is part of this module.
2. If 'zxing-scanner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("      <div [hidden]="!hasPermission"

I assume the root cause is the part 'zxing-scanner' is not a known element: but I don't see how we can include that?

@odahcam any thoughts on what might be wrong would be appreciated

[odahcam]

I don't remember using the .forRoot() method for importing, try without it.

[acndr]

It doesn't seem to make much difference either way. I found the .forRoot() in another example.

[odahcam]

It must be old, can you set a StackBlitz example for me to debug?

[thatham]

ZXingScannerModule in your feature module

here the feature module that you're referring in config.xml?
if yes, kindly provide a sample

[odahcam]

Sorry, what config.xml? ZXingScannerModule is not a feature module, that module is a sub module of your main AppModule.

[thatham]

I'm using Cordova to build angular application for android, it has common config.xml for android, ios and other OSes... I need help to make the component work.

[thanhphuocdang]

P

I'm using Cordova to build angular application for android, it has common config.xml for android, ios and other OSes... I need help to make the component work.

Please make your Angular application works on browser first. You are messing things up.

[thatham]

P

I'm using Cordova to build angular application for android, it has common config.xml for android, ios and other OSes... I need help to make the component work.

Please make your Angular application works on browser first. You are messing things up.

it's working well with browsers. After I install the same as an android app it's shows nothing

[thanhphuocdang]

I curious about that same as an android app. You are using Cordova pf to build the native app right?
Could you try to map Angular with Cordova?

[thatham]

I've build Angular application first, then, i took production build and copied into cordova "www" folder and build output as apk. Before took apk file, i've tried with cordova browser the component worked as expected. But on mobile, it's a blank screen also it not asks for camera permission also

[thanhphuocdang]

Ok

1. Google for "wrap Angular app with Cordova" to resolve your current issue
2. Have a look at Cordova plugins for permission on the native app
   Good luck!

[odahcam]

Thank you so much for the help @thanhphuocdang and good luck @thatham.

I'm locking because this ran out of the issue's topic, feel free to open a new one if needed. 🙂