themyth92 / ngx-lightbox

Lightbox2 use with angular >= 5
MIT License
115 stars 67 forks source link

NullInjectorError: R3InjecterError no provider for lightbox #77

Closed tonyshare closed 3 years ago

tonyshare commented 3 years ago

Envirment

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
tonyshare commented 3 years ago

I solved the the problem for i didn't import the LightboxModule