0

I am trying dynamically create a component using the NgbModal from the ng-bootstrap library (which I believe uses the ComponentFactoryResolver method underneath) but am running into an issue when I try to provide HttpClient into the Static Injector.

Has anyone run into this issue and know what to do? Thanks in advance for the help!

EDIT: The code where I create the new component.

let modal: NgbModalRef =
        this.modalService.open(HoursApprovalModalComponent, {
            injector: Injector.create( [
                {provide: FormBuilder, useClass: FormBuilder, deps: []},
                { provide: AttendanceService, useClass: AttendanceService, deps: [HttpClient]},
                { provide: HttpClient, useClass: HttpClient, deps: []},
                // { provide: HttpHandler, useClass: HttpHandler, deps: [] },
            ] ),
            size: 'lg'
        });
Murad Khan
  • 401
  • 2
  • 8
  • 1
    Are you talking about actually talking about [ng-bootstrap](https://ng-bootstrap.github.io/#/components/modal/examples)? What exactly are you trying to achieve? What do you mean by "dynamically generated component"? Have you looked at the example showing how to use a component as the modal body? – JB Nizet Jan 18 '18 at 19:47
  • I'm trying to make use of the HttpClient service inside of the component I generate with ng-bootstrap (just noticed I misspelled that, my bad). I can get the component to show up inside of the modal but my issue comes up when I pass an injector into the NgbModalOptions. Whenever I try to use the HttpClient instance inside the new component, I get an error that states can not read property 'handle' of undefined. 'handle' comes from the HttpHandler inside of HttpClient so I was wondering how to get that to be created correctly. Sorry for any confusion. – Murad Khan Jan 18 '18 at 20:07
  • 1
    Why would you need to pass an injector to the component? Just inject HttpClient (or, preferrably, a service using HttpClient) in the component constructor, as you would with any other component. – JB Nizet Jan 18 '18 at 20:11
  • I think that's what I was doing, unless there's a way to inject services individually. I'll edit in more of the code where I create the component so you can see what's going on. – Murad Khan Jan 18 '18 at 20:14
  • 1
    See http://plnkr.co/edit/upVW6GLrcPJF0xgVWoTH?p=preview for a demo. – JB Nizet Jan 18 '18 at 20:17
  • So I was unneccessarily passing in an injector:P If you wouldn't mind answering, could you name a use case for the Injector class from the Angular library? And thanks so much for the help! – Murad Khan Jan 18 '18 at 20:22
  • 1
    AFAIK, you would need to pass an injector when the modal needs to use the same injector as the component opening the modal, for example, because the component has its own providers, or is lazy-loaded. If the service and components that the modal component uses are part of the root module, you don't need that. – JB Nizet Jan 18 '18 at 20:25

1 Answers1

1

If HttpClient is available in the root module, you don't need to pass any injector. That's useful if you want the component to use an injector different from the root one. Just inject HttpClient in your modal component as you would do in any other component.

Here's a working demo

JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • plunker is broken... stuck on loading – WasiF Jul 15 '18 at 14:21
  • Works fine here. – JB Nizet Jul 15 '18 at 14:22
  • (SystemJS) XHR error (404) loading https://unpkg.com/rxjs@%5E5.5.2/operators/switchMap Error: XHR error (404) loading https://unpkg.com/rxjs@%5E5.5.2/operators/switchMap at o (https://unpkg.com/systemjs@0.19.47/dist/system.js:4:17461) at XMLHttpRequest.W.i.onreadystatechange (https://unpkg.com/systemjs@0.19.47/dist/system.js:4:18049) at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (https://unpkg.com/zone.js@0.8.10/dist/zone.js:1032:39) at ZoneDelegate.invokeTask (https://unpkg.com/zone.js@0.8.10/dist/zone.js:414:31) – WasiF Jul 15 '18 at 14:26