Ngx-bootstrap: Problem implementing modals: Cannot read property 'parentInjector' of undefined

[maxmumford]

Hi,

I am trying to implement the modal component with the following code:

_modal-confirm.component.html_

<button class="btn btn-primary" (click)="lgModal.show()">Large modal</button>

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Large modal</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>

_modal-confirm.component.ts_

import { Component } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import { MODAL_DIRECTVES, BS_VIEW_PROVIDERS } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'modal-confirm',
  moduleId: module.id,
  templateUrl: 'modal-confirm.component.html',
  directives: [MODAL_DIRECTVES, CORE_DIRECTIVES],
  viewProviders: [BS_VIEW_PROVIDERS]
})
export class ModalConfirmComponent {
}

and include it with the directive:

<modal-confirm></modal-confirm>

The "Large Modal" button appears but when I click on it, it throws the following exception:

platform-browser.umd.js:962 Error: Uncaught (in promise): TypeError: Cannot read property 'parentInjector' of undefined
    at resolvePromise (zone.js:538)
    at resolvePromise (zone.js:523)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (core.umd.js:6066)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at drainMicroTaskQueue (zone.js:474)
    at HTMLButtonElement.ZoneTask.invoke (zone.js:426)

Any ideas how to fix this?

Thanks

[FRAGnatt]

I have some problem ;(

@maxmumford you forgot add this in AppComponent
https://valor-software.com/ng2-bootstrap/#/modals
class AppRoot { public constructor(viewContainerRef:ViewContainerRef) { // You need this small hack in order to catch application root view container ref this.viewContainerRef = viewContainerRef; } }
But it was not help me ;((

[maxmumford]

Can't believe I missed that! I even read it in the docs this morning :smile:. It did the trick, FRAGnatt, thanks.

What error are you getting?

[FRAGnatt]

Did it solve your problem? I have some error like you and it was not help me. Please can you send to me repositories where work modal window

[FRAGnatt]

No. It's all ok. Thank you. I have problem because I have nested router. After few day's I will create Issue ))

[maxmumford]

Yep mines working now, it was because I had forgotten to include the viewContainerRef like you said.

Glad to hear yours is working now.

Cheers

[leowaisblatt]

Hello I am having the same issue.
the line ref this.viewContainerRef = viewContainerRef; in the constructor don't even compile.
Any clue?

[maxmumford]

Full solution looks like this:

import { ViewContainerRef } from '@angular/core';

constructor(private privateviewContainerRef: ViewContainerRef) {
    this.viewContainerRef = privateviewContainerRef;
}