NullInjectorError: R3InjecterError no provider for lightbox

[tonyshare]

Enviroment

angular: 10 or 11

I created a test example of using ngx-lightbox. In the component:

import { Component, OnInit } from '@angular/core';
import { Lightbox } from 'ngx-lightbox';

@Component({
  selector: 'app-test-lightbox',
  templateUrl: './test-lightbox.component.html',
  styleUrls: ['./test-lightbox.component.scss']
})
export class TestLightboxComponent implements OnInit {

  constructor(private lightbox: Lightbox) { }

  ngOnInit(): void {
  }

}

the project can pass the complie processing.

When I opened the page and got the following error messages:

core.js:5980 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[Lightbox -> Lightbox -> Lightbox]: 
  NullInjectorError: No provider for Lightbox!
NullInjectorError: R3InjectorError(AppModule)[Lightbox -> Lightbox -> Lightbox]: 
  NullInjectorError: No provider for Lightbox!
    at NullInjector.get (core.js:10823)
    at R3Injector.get (core.js:10990)
    at R3Injector.get (core.js:10990)
    at R3Injector.get (core.js:10990)
    at NgModuleRef$1.get (core.js:25046)
    at Object.get (core.js:24760)
    at lookupTokenUsingModuleInjector (core.js:3296)
    at getOrCreateInjectable (core.js:3408)
    at Module.ɵɵdirectiveInject (core.js:14428)
    at NodeInjectorFactory.TestLightboxComponent_Factory [as factory] (test-lightbox.component.ts:9)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28282)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
defaultErrorLogger @ core.js:5980
handleError @ core.js:6028
next @ core.js:28894
schedulerFn @ core.js:25659
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25649
(anonymous) @ core.js:28317
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:28222
onHandleError @ core.js:28317
handleError @ zone-evergreen.js:368
runGuarded @ zone-evergreen.js:136
api.microtaskDrainDone @ zone-evergreen.js:670
drainMicroTaskQueue @ zone-evergreen.js:576
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:28936
zUnb @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.js:11
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1

[robertcbit]

@tonyshare - did you find a solution for this? I'm getting the same error but with 'Page'. Any ideas? thanks much in advance!

JS: ERROR NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]: JS: NullInjectorError: No provider for Page! JS: bootstrap: Error bootstrapping app module: JS: R3InjectorError(AppModule)[Page -> Page -> Page]: JS: NullInjectorError: No provider for Page! JS: JS: NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]: JS: NullInjectorError: No provider for Page! JS: at NullInjector.get (file: src\webpack:\@nativescript\mayapp\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11081:0) JS: at R3Injector.get (file: src\webpack:\@nativescript\mayapp\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11247:0) JS: at R3Injector.get (file: src\webpack:\@nativescript\mayapp\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11247:0) JS: at R3Injector.get (file: src\webpack:\@nativescript\mayapp\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11247:0) JS: at NgModuleRef$1.get (file: src\webpack:\@nativescript\mayapp\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:25341:0) JS: at Object.get (file: src\webpack:\@nativescript\mayapp\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:25055:0) JS: at lookupTokenUsingModuleInjector (file: src\webpack:\@nativescript\mayapp\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:3342:0)

[tonyshare]

I forgot how I solved the problem, this is my code you can reference:

component.ts

import { Lightbox } from 'ngx-lightbox';

export class Detail{

  constructor(
    public _lightbox: Lightbox
  ) {  }

open(link: string, caption: string) {
    this._album = [];
    this._album.push({
      src: link,
      caption: caption,
      thumb: link,
    });

    this._lightbox.open(this._album, 0);
  }

html

<td class="bg-success" (click)="open('/link/to/img', 'campus')"></td>

[NizarBg-96]

i had same problem, importing LightboxModule in AppModule solved the issue