Ngx-scanner: NullInjectorError: No provider for IterableDiffers!

[ninjaonsafari]

I get an error when i try the basic example:
Unhandled Promise rejection: StaticInjectorError(AppModule)[NgClass -> IterableDiffers]: StaticInjectorError(Platform: core)[NgClass -> IterableDiffers]: NullInjectorError: No provider for IterableDiffers! ; Zone: angular ; Task: Promise.then ; Value: Error: StaticInjectorError(AppModule)[NgClass -> IterableDiffers]: StaticInjectorError(Platform: core)[NgClass -> IterableDiffers]:

Versions:
Angular CLI: 1.7.3
Node: 9.4.0
OS: win32 x64
Angular: 5.2.8
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cdk: 5.2.4
@angular/cli: 1.7.3
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

am i missing something?

[odahcam]

This does not looks as a scanner error, this looks like some Angular error. I already saw this error a bunch of times. Have you tryied the StackBlitz example?

I dunno how to help here. 😕

[ninjaonsafari]

@odahcam yep i tried copying the code from the stackblitz but i gives me the same error... I dont know what i missing... I have all necessary modules imported and trie .forRoot(). still no luck

[ninjaonsafari]

when I remove [ngClass] on this line then it works

[odahcam]

Right, can you confirm for me if you have an extra node_modules folder inside the /node_modules/@zxing/ngx-scanner package?

[ninjaonsafari]

@odahcam yes there is one with @angular and rxjs inside

[werthdavid]

Have you imported FormsModule?

import {FormsModule} from "@angular/forms";

[Clark73]

Just wanted to say I am also experiencing this issue:

Dependencies

    "@angular/animations": "^5.2.9",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.9",
    "@angular/compiler": "^5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "^5.2.9",
    "@angular/http": "^5.2.9",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "^5.2.9",
    "@angular/router": "^5.2.9",
    "@ncstate/sat-popover": "^1.0.0",
    "@zxing/ngx-scanner": "^1.0.2",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.8",
    "text-encoding": "^0.6.4",
    "zone.js": "^0.8.19"

Module Def:

@NgModule({
    imports: [
        ReactiveFormsModule,
        DevicesRoutingModule,
        CommonModule,
        SatPopoverModule,
        BrowserModule,
        ZXingScannerModule.forRoot(),
        FormsModule
    ],
    declarations: [
        OnboardDeviceComponent
    ],
    exports: [
        OnboardDeviceComponent
    ]
})

I was previously using v0.3.4 Of this package, and I am trying to upgrade it to v1.0.2. I have tried to also follow the StackBlitz example to no avail.

[Clark73]

Okay so the root cause of this seems to actually be the same as https://github.com/werthdavid/ngx-scanner/issues/43. (at least for me)

With the angular CLI when running ng serve on demand compilation of the scanner component results in the Injector error. If you start trying to do a ng build --prod or ng serve --prod it gives you the true compilation error of

ERROR in ../@zxing/ngx-scanner/zxing-ngx-scanner.ts(9,2): Error during template compile of 'ZXingScannerModule'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule'
    'NgModule' calls 'ɵmakeDecorator'.

So @ninjaonsafari try doing a prod build and see if you get that above error. If you do, the fix is actually in the tsconfig.json to add all the angular dependencies you have to the "paths" element. Here is mine:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
        "@angular/animations": ["../node_modules/@angular/animations"],
        "@angular/cdk": ["../node_modules/@angular/cdk"],
        "@angular/common": ["../node_modules/@angular/common"],
        "@angular/compiler": ["../node_modules/@angular/compiler"],
        "@angular/core": ["../node_modules/@angular/core"],
        "@angular/forms": ["../node_modules/@angular/forms"],
        "@angular/http": ["../node_modules/@angular/http"],
        "@angular/material": ["../node_modules/@angular/material"],
        "@angular/platform-browser": ["../node_modules/@angular/platform-browser"],
        "@angular/platform-browser-dynamic": ["../node_modules/@angular/platform-browser-dynamic"],
        "@angular/router": ["../node_modules/@angular/router"]
    }
  }
}

[odahcam]

Refering to this comment: https://github.com/werthdavid/ngx-scanner/issues/51#issuecomment-376410434

@ninjaonsafari please delete that inside node_modules folder.

[odahcam]

Refering to this comment: https://github.com/werthdavid/ngx-scanner/issues/51#issuecomment-376459174

@werthdavid shouldn't the FormsModule be imported by the scanner module? I remember to write that import and it should be there. 😕

[odahcam]

@Clark73 , please try to delete the extra node_modules as I said in https://github.com/werthdavid/ngx-scanner/issues/51#issuecomment-376605359 .

[odahcam]

@Nightapes and @werthdavid have work in a PR (#49) that should fix this problem. Let's try to make this fix GA ASAP. 🚀

[werthdavid]

Thanks for the detailed analysis @Clark73 greatly appreciated!
@odahcam anything that speaks agains publishing a new version that contains the PR?

[odahcam]

I didn't had time to test the latest develop branch. But if you say it works I agree with a patch publish. 🙂

[werthdavid]

I tested and published version 1.0.3
@ninjaonsafari @Clark73 can you please test with the latest version?

[ninjaonsafari]

@werthdavid i can confirm that it works with the update
Thank you :100:

[odahcam]

Updating the package version I can confirm that @angular will not bother us anymore! 😁

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.